jQuery异步ajax

开发工具与关键技术：Adobe Dreamweaver jQuery
作者：李哲定
撰写时间：2020年4月29日
近期在学习异步开发的知识，顺便做了个整理
首先先了解到：普通B/S模式代表同步，AJAX技术代表异步，
同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
（请求-响应-请求-响应）
异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕
(请求-响应-请求-请求-请求-响应。。。)
下面就是学习笔记的一个整理了哦！
一．传统ajax异步开发
1.创建Ajax异步对象
function createAjax(){var ajax = null;try {
//IE浏览器
ajax = new ActiveXObject(“microsoft.xmlhttp”);
} catch (e1) {
try {
//火狐或者谷歌浏览器
ajax = new XMLHttpRequest();
} catch (e2) {
alert(“您的浏览器不支持异步对象”);
}}return ajax;
}
2.准备发送异步请求
a)如果是GET方式的话，且如果是汉字的话，要进行URL编码
//对汉字进行URI编码
username = encodeURI(username);
//创建ajax对象,调用上面的方法
var ajax = createAjax();
//准备发送ajax请求，以get形式发送
var method=“GET”; var url="KaTeX parse error: Expected 'EOF', got '&' at position 77: …e().getTime()+"&̲username="+user…{pageContext.request.contextPath}/UserServlet?time=" +new Date().getTime(); ajax.open(method,url);
//设置AJAX请求头为POST，他会将请求体中的汉字自动进行UTF-8的编码
ajax.setRequestHeader(“content-type”,“application/x-www-form-urlencoded”);
var content = “username=” + username;
ajax.send(content);
3.真正发送请求到服务器
a)GET方式
ajax.send(null);
b)POST方式
ajax.send(content);
4.不断监听服务器状态变化（0-1-2-3-【4】）
5.从Ajax异步对象中获取服务器响应的结构
ajax.onreadystatechange = function(){
//4 表示已经加载且收到数据完毕，下面还要保证http状态码为200才能成功
if(ajax.readyState == 4){
if(ajax.status == 200){
var tip = ajax.responseText;
}
}
}
6.处理响应结果
eg 举出一个常用的处理例子
将响应的结果按照DOM规则添加到web页面指定的标签中
var $img = $("");
$(“span”).text("");
$("span").append($img);
二．Jquery Ajax开发：

1. 简单形式：
   JQuery对象.load(url);返回结果自动添加到JQuery对象代表的标签中间。如果是Servlet的话，采用的是GET方式。
   2.复杂形势：
   //JSON格式发送给servlet处理数据
   var sendDate={ “name”:“哈哈”, “sal”: 60000};
   JQuery对象.load(url,sendDate,function(backDate){
   //对收到的数据进行打印或者其他操作 //backDate：
   //如果服务器返回html，即backDate就是string，不要解析
   //如果服务器返回json，即backDate就是object，要解析
   //如果服务器返回xml，即backDate就是object，要解析
   alert(backDate)
   });
   注意:若要post提交也可以直接写成
   $.post(url,sendData,function(backDate){
   //具体操作，比如
   $("#realsalaryID").val(backDate)
   })