ajax第一例:helloworld|学习笔记

简介: 快速学习ajax第一例:helloworld

开发者学堂课程【Ajax:ajax第一例:helloworld】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/31

ajax第一例:helloworld


目录:

.写服务器端代码

二、做客户端的响应

写客户端代码

四、总结


一.写服务器端代码

写一个Servlet Wizard,这是服务器端的 :

package:cn.itcase.web.servlet

Name:AServlet

选择 doGet()

点击Next

二、做客户端的响应

写一条代码,打一条辅助语句“helloAJAX!”再做一个客户端的响应:response.getWriter().print“helloAJAX!!!”;没说相应的内容也没有问题,这个是纯文本,不会引发什么问题。

三、写客户端代码

客户端代码:ajax1.jsp,点击按钮后,使服务器的相应显示在这里。此时要请求服务器。

首先给按钮添加监听器:

window.onload = function() {//文档加载完毕后执行

var btn = document. getElementById ("btn");

btn.onclick = function() {//给按钮的点击事 件注册监听。

其次,ajax四步操作,得到服务器的响应,把响应结果显示到h1元素中:

写一个函数,这个函数是创建异步对象:

funation createXMLHttpRequest(){

try{

return new XMLHttpRequest ();//大多数浏览器

} catch (e) {

try

return Actviexobject ("Msxm12. XMLHTTP");//IE6.O

} catch (e) {

try {

return Actviexobject ("Microsoft . XMLHTP");//IE5.5及更早版本} catch (e) {

alert ("哥们儿,您用的是什么浏览器啊? ");

throw e;

1.得到异步对象:var xmlHttp = createXMLHttpRequest() ;

2.打开与服务器的连接:

指定请求方式

指定请求的URL

指定是否为异步请求

xmlHttp.open("GET", "", true) ;

3.发送请求:

xmlHttp.send (null);//GEr请求没有请求体,但也要给出null,不然rirePox可能会不能发送!/*

4.给异步对象的onreadystatechange事件注册监听器:

xmlHttp .onreadystatechange = function() {//当xmlHttp的状态发生 变化时执行

//双重判断: xmlHttp的状态为4(服务器响应结束),以及服务器响应的状态码为200(服务器响应成功)。

if (xm1Http. readyState == 4 && xmlHttp.status == 200) {

初衷是把响应结果显示在h1元素中,所以此时需要:

//获取服务器的响应结束

vartext = xmlHttp responseText;

//获取h1元素

Var h1 = document .getElementById("h1") ;

h1. innerHTML = text;

image.png

四、总结

代码很重要,相较于以前教难。此时Servlet已经执行。服务器相应了,页面局部刷新,这就是ajax。

相关文章
|
1天前
|
数据采集 人工智能 自然语言处理
3分钟采集134篇AI文章!深度解析如何通过云无影AgentBay实现25倍并发 + LlamaIndex智能推荐
结合阿里云无影 AgentBay 云端并发采集与 LlamaIndex 智能分析,3分钟高效抓取134篇 AI Agent 文章,实现 AI 推荐、智能问答与知识沉淀,打造从数据获取到价值提炼的完整闭环。
283 90
|
9天前
|
机器人 API 调度
基于 DMS Dify+Notebook+Airflow 实现 Agent 的一站式开发
本文提出“DMS Dify + Notebook + Airflow”三位一体架构,解决 Dify 在代码执行与定时调度上的局限。通过 Notebook 扩展 Python 环境,Airflow实现任务调度,构建可扩展、可运维的企业级智能 Agent 系统,提升大模型应用的工程化能力。
|
人工智能 前端开发 API
前端接入通义千问(Qwen)API:5 分钟实现你的 AI 问答助手
本文介绍如何在5分钟内通过前端接入通义千问(Qwen)API,快速打造一个AI问答助手。涵盖API配置、界面设计、流式响应、历史管理、错误重试等核心功能,并提供安全与性能优化建议,助你轻松集成智能对话能力到前端应用中。
720 154
|
15天前
|
人工智能 数据可视化 Java
Spring AI Alibaba、Dify、LangGraph 与 LangChain 综合对比分析报告
本报告对比Spring AI Alibaba、Dify、LangGraph与LangChain四大AI开发框架,涵盖架构、性能、生态及适用场景。数据截至2025年10月,基于公开资料分析,实际发展可能随技术演进调整。
971 152
|
2天前
|
域名解析 人工智能
【实操攻略】手把手教学,免费领取.CN域名
即日起至2025年12月31日,购买万小智AI建站或云·企业官网,每单可免费领1个.CN域名首年!跟我了解领取攻略吧~
|
1天前
|
数据采集 人工智能 搜索推荐
别再“调教”ChatGPT了!用Qwen2.5打造24小时在线数字分身
在AI时代,专属“数字分身”正从科幻走向现实。依托Qwen2.5-14B大模型、LoRA微调技术及LLaMA-Factory Online平台,仅需四步即可打造会说话、懂风格、能办事的个性化AI助手,让每个人拥有自己的“贾维斯”。
200 152