Ajax简介Ajax 异步无刷新技术1.AJAX的全称—Asynchronous Javascript and XML异步的Javascript和XML （读法：阿贾克斯 -- A杰克s）2.AjAX不是编程语言，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
3.传统的网页，要想更新内容或提交一个表单，就要重新载入页面；使用AjAX技术的页面，通过后台跟服务器进行少量的数据交换，网页就可以实现异步局部更新；Ajax三步骤运用HTML和CSS实现页面，表达信息；
运用XMLHttpRequest和web服务器进行数据的异步交换；HTTP状态码1XX：信息类，表示收到Web浏览器请求，正在进一步处理中2XX:成功，表示用户请求被正确接收3XX:重定向，表示请求没有成功，客户必须采取进一步动作
4XX:客户端错误，表示客户端提交的请求有错误，例如：404 NOT Found,意味着请求中所引用的文档不存在5XX:服务器错误，表示服务器不能完成对请求的处理，如：500XMLHttpRequest发送请求：
open(method,url,async)method：规定HTTP发送请求的方式是get还是post,不区分大小写，一般来说用大写url：请求地址(相对地址或绝对地址)async:同步/异步(false/true)，默认是异步也就是true，可以不用填写
send(string):发送到服务器（该参数可以填或者不填-----get方法不填或填null，post:一般要填）XMLHttpRequest如何取得响应通过readystate属性知道服务器是否响应，只要4完成即可
readyState属性的变化代表服务器响应的变化0：请求未初始化，open还没有调用1：服务器连接已建立，open已经调用了2：请求已接收，也就是接收到头信息了3：请求处理中，也就是接收到了响应主体4：请求已完成，且响应已就绪，也就是响应完成了
通过onreadystatechange事件 ，对readyState属性进行监听即对服务器的响应进行监听，运用JavaScript操作DOM，实现动态局部刷新；同步和异步同步：用户填写所有信息后，提交给服务器，等待服务器的回应（检验数据），是一次性的。
信息错误又要重新填写！异步：当用户填写完一条信息后，该信息会自动向服务器提交，然后服务器响应客户端，在此过程中，用户依然在填写表格的信息，即向服务器请求多次，节省了用户的时间，提高了用户的体验Ajax实现流程。
XMLhttpRequest对象来实现这一功能，也需要javascript来操作DOM实现局部的信息更新不需要重新加载整个页面同步请求实现：1.得到核心对象XMLHttpRequest对象var xhr = new XMLHttpRequest();。
2.准备/打开请求open(请求类型GET/POST,请求的路径,是否异步true/false);3.发送请求send(参数/null);注：如果是get请求，参数直接跟在请求路径后面，send()方法中设置null;
如果是post请求，有参数则设置参数，无参数设置为null;4.解析响应数据1、判断响应是否成功status=200（404=未找到资源;500=服务器异常;200=成功）2、得到后台响应数据responseText
//1、得到核心对象XMLHttpRequest对象varxhr=newXMLHttpRequest();console.log(xhr);
//2、准备/打开请求open(请求类型GET/POST,请求的路径,是否异步true/false);xhr.open("GET","js/data.json?uname=zhangsan&uage=10",false); // 同步请求
//3、发送请求send(参数/null);xhr.send(null);//4、解析响应数据if(xhr.status==200){//1、判断响应是否成功status=200//2、得到后台响应数据
responseTextconsole.log(xhr.responseText);varuser=JSON.parse(xhr.responseText);console.log(user);console
.log(user.uname);} else {alert("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText); }异步请求实现：1.得到核心对象XMLHttpRequest对象
var xhr = new XMLHttpRequest();2.准备/打开请求open(请求类型GET/POST,请求的路径,是否异步true/false);3.发送请求send(参数/null);注：如果是get请求，参数直接跟在请求路径后面，send()方法中设置null;
如果是post请求，有参数则设置参数，无参数设置为null;4.解析响应数据1、判断响应是否成功status=200（404=未找到资源;500=服务器异常;200=成功）2、得到后台响应数据responseText
// 1、得到核心对象XMLHttpRequest对象 varxhr=newXMLHttpRequest();console.log(xhr);
// 2、准备/打开请求 open(请求类型GET/POST,请求的路径,是否异步true/false); xhr.open("GET","js/data.json?uname=zhangsan&uage=10"
,true);// 异步请求 // 3、发送请求 send(参数/null); xhr.send(null);// 监听readystate事件 （0=尚未调用open方法；1=已调用open方法未调用send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完全接收）
xhr.onreadystatechange=function(){// 如果是异步请求，需要等待数据完全响应后再做处理 if(xhr.readyState==4){// 4、解析响应数据 if(xhr
.status==200){// 1、判断响应是否成功 status=200 // 2、得到后台响应数据 responseText console.log(xhr.responseText);varuser
=JSON.parse(xhr.responseText);console.log(user);console.log(user.uname);}else{console.log("失败状态码："+xhr
.status+"，失败原因："+xhr.statusText);}}}GET/POST请求类型GET: 一般用于信息的获取，使用URL传递参数，对发送信息的数量也有限制，一般在2000字符！默认方式，一般用于查询、获取操作,不是很安全，任何人可见，信息都显示在URL中
POST：一般用于修改服务器上的资源，对所发送的数量无限制一般用于发送表单数据，新建，修改，删除等操作，要安全一些，不在URL中显示，对其他人不显示POST请求测试代码
>// 1、得到核心对象XMLHttpRequest对象 varxhr=newXMLHttpRequest();console.log(xhr);// 2、准备/打开请求 open(请求类型GET/POST,请求的路径,是否异步true/false);
xhr.open("POST","js/data.json",true);// 异步请求 // 由于Post请求的机制问题，需要模拟表单提交 xhr.setRequestHeader(Content-Type
,application/x-www-form-urlencoded);// 3、发送请求 send(参数/null); xhr.send("uname=zhangsan&uage=10");// post请求如果有参数，需要将参数设置在send方法中
// 监听readystate事件 （0=尚未调用open方法；1=已调用open方法未调用send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完全接收） xhr.onreadystatechange
=function(){// 如果是异步请求，需要等待数据完全响应后再做处理 if(xhr.readyState==4){// 4、解析响应数据 if(xhr.status==200){// 1、判断响应是否成功 status=200
// 2、得到后台响应数据 responseText console.log(xhr.responseText);varuser=JSON.parse(xhr.responseText);console
.log(user);console.log(user.uname);}else{console.log("失败状态码："+xhr.status+"，失败原因："+xhr.statusText);}}}
get和post区别1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来2.使用Get请求发送数据量小,Post请求发送数据量大3.get请求需注意缓存问题,post请求不需担心这个问题。
4.post请求必须设置Content-Type值为application/x-form-www-urlencoded5.发送请求时,因为get请求的参数都在url里,所以send函数发送的参数为null,而post请求在使用send方法时,却需赋予其参数。
Ajax封装测试代码
="text/javascript">请求的对象参数/请求方式信息/处理数据函数varobj={method:"GET",url:"js/data.json?aa=11",async:true,data
:{uname:"zhangsan",uage:18},success:function(data){// 做想处理的事情 console.log(data);}};//ajax(obj); /* ajax({
method:"GET", url:"js/data2.json", async:true }); */封装函数ajax();functionajax(obj){得到核心对象XMLHttpRequest对象
varxhr=newXMLHttpRequest();调函数formatParam(obj.data)准备对象参数varparams=formatParam(obj.data);判断是否是get请求，如果是则将参数拼接在url后面
if("GET"==(obj.method).toUpperCase()){// js/data.json?uname=zhangsan&uage=18 obj.url+=(obj.url).indexOf
("?")>0?"&"+params:"?"+params;}准备/打开请求//open(请求类型GET/POST,请求的路径,是否异步true/false); xhr.open(obj.method,
obj.url,obj.async);判断是POST或GET请求if("POST"==(obj.method).toUpperCase()){如Post请求则机制问题需要模拟表单提交xhr.setRequestHeader
(Content-Type,application/x-www-form-urlencoded);发送请求send(参数/null);xhr.send(params);// post请求如果有参数，需要将参数设置在send方法中
}else{如GET请求send(null)xhr.send(null);// get请求设置为null }判断是同步请求还是异步请求if(obj.async){// 异步请求 如异步请求监听readystate事件
// 监听readystate事件 （0=尚未调用open方法；1=已调用open方法未调用send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完全接收） xhr.onreadystatechange
=function(){如异步请求需数据完全响应在处理// 如果是异步请求，需要等待数据完全响应后再做处理 if(xhr.readyState==4){处理响应结果callback();}}}else{
// 同步请求 如同步请求直接处理响应结果// 处理响应结果 callback();}封装响应结果函数functioncallback(){解析响应数据if(xhr.status==200){判断响应是否成功
status=200得到后台响应数据responseText/* console.log(xhr.responseText); var user = JSON.parse(xhr.responseText);
console.log(user); */obj.success(xhr.responseText);}else{如响应未成功现实状态码和原因console.log("失败状态码："+xhr.status
+"，失败原因："+xhr.statusText);}}}// formatParam({ uname:"zhangsan", uage:18 }); 封装对象参数转换成字符串/*将对象格式的参数转换成等号拼接的字符串*/
functionformatParam(data){判断参数是否存在if(data==null){return"";}定义数组，接收每个参数字符串varparams=[];for(varkeyindata
){/* console.log(key); console.log(data[key]); console.log(key+"="+data[key]) */通过push()方法向数组的最后追加
params.push(key+"="+data[key]);}console.log(params.join("&"));varparam=params.join("&");// uname=zhangsan&uage=18
returnparam;}Jquery调用ajaxjquery调用ajax方法： 格式：$.ajax({}); 参数： type：请求方式GET/POST url：请求地址url
async：是否异步，默认是true表示异步 data：发送到服务器的数据 dataType：预期服务器返回的数据类型 contentType：设置请求头 success：请求成功时调用此函数
error：请求失败时调用此函数
$.ajax-GET请求$.ajax({type:"get",// 请求类型 GET/POST url:"js/data.json",// 请求路径 dataType:"json",// 预期服务器返回的数据类型
data:{// 请求参数，键值对的json对象 },success:function(data){// 请求成功时的回调函数 console.log(data);}});$.ajax-POST请求$.
ajax({type:"post",// 请求类型 GET/POST url:"js/data.json",// 请求路径 dataType:"json",// 预期服务器返回的数据类型 data:{
// 请求参数，键值对的json对象 },success:function(data){// 请求成功时的回调函数 console.log(data);}});$.get()的几种方法
这是一个简单的 GET 请求功能以取代复杂 $.ajax 请求成功时可调用回调函数如果需要在出错时执行函数，请使用 $.ajax。
1.无参数，无返回值 // $.get("http://localhost:8080/jqueryAjax/ServletTest");2.有参数，无返回值
// $.get("http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan"});3.无参数，有返回值 /* $.get("http://localhost:8080/jqueryAjax/ServletTest",function(data){
console.log(data); }); */4.有参数，有返回值(推荐使用)/* $.get("http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan"},function(data){
console.log(data); }); */$.get("js/data.json",{},function(data){console.log(data);});$.post()
这是一个简单的 POST 请求功能以取代复杂 $.ajax 请求成功时可调用回调函数如果需要在出错时执行函数，请使用 $.ajax无参数，无返回值
// $.post("http://localhost:8080/jqueryAjax/ServletTest");有参数，无返回值 // $.post("http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan"});
无参数，有返回值 /* $.post("http://localhost:8080/jqueryAjax/ServletTest",function(data){ console.log(data);
}); */有参数，有返回值(推荐使用)/* $.post("http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan"},function(data){
console.log(data); }); */$.post("js/data.json",{},function(data){console.log(data);});$.getJSON
$.getJSON("http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan"
},function(data){console.log(data);});$.get("http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan"
},function(data){console.log(data);});jsonp远程跨域时，如果有两个域名，从其中一个域名去访问另一个域名时，使用 普通的 ajax 方法是获取不到数据的，那么就可以使用 jsonp 方式发送请求。
添加属性：jsonp:’callback’dataType:’jsonp’
>$.ajax({type:"get",url:"js/data.json",success:function(data){
console.log(data);创建表格对象 vartable=$(""
);创建表头对象vartr="编号姓名密码年龄性别头像";将表头插入到表格中（最后面）
table.append(tr);得到用户数据列表varuserList=data.result;遍历数据数组for(vari=0;i
user=userList[i];创建tr对象varuserTr=$("");拼接tdvartd=""+user.userId+""+user.userName
+"";td+=""+user.userPwd+""+user.userAge+"";// true表示男，false表示女 varsex="男";if(!
user.userSex){sex="女";}td+=""+sex+""
;将td对象追加到tr内部最后面userTr.append(td);将tr追加到table对象中table.append(userTr);}将表格插入到div中$("#userList").append
(table);}});
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。