Ajax 技术进阶实现
Ajax 关键代码的封装
第一步:封装AJax Get请求，关键代码分析如下：
function doAjaxGet(url,params,callback){ //1.创建XmlHttpRequest对象 var xhr=new XMLHttpRequest(); //2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程(例如连接是否建立，请求是否在处理，响应是否已产生) xhr.onreadystatechange=function(){//callback(回调函数) //基于xhr对象获取的通讯状态，对响应数据进行处理
//readyState状态说明
//0：未初始化，尚未调用open() 方法
//1：启动。已经调用open() 方法，但尚未调用send() 方法
//2：发送。已经调用send() 方法，但尚未接收到响应
//3：接收。已经接收到部分响应
//4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了
if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了 //服务端响应的结果会传递给XHR对象，我们可以借助responseText获取响应结果 callback(xhr.responseText);
}
} //3.创建与服务端的连接 xhr.open("GET",url+"?"+params,true);//true表示异步 //4.发送请求 xhr.send(null); //Get请求，send方法不传内容 //5.对响应结果进行处理(在回调函数中处理)。
}第二步:封装AJax Post请求，关键代码分析如下：
function doAjaxPost(url,params,callback){ //1.创建XmlHttpRequest对象 var xhr=new XMLHttpRequest(); //2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程. xhr.onreadystatechange=function(){//callback(回调函数) //基于xhr对象获取的通讯状态，对响应数据进行处理 if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了 //服务端响应的结果会传递给XHR对象， //我们可以借助xhr.responseText获取响应结果 callback(xhr.responseText);
}
} //3.创建与服务端的连接 xhr.open("POST",url,true);//true表示异步 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //4.发送请求 xhr.send(params); //post请求将参数写到send方法 //5.对响应结果进行处理(在回调函数中处理)。
}第三步:在业务方法中应用封装好的代码,例如:
保存业务的关键客户端代码分析及实现.
function doSave(){ //1.定义请求url var url="doSave"; //2.定义请求参数 var params="name="+document.forms[0].name.value; //3.发送异步的post请求 doAjaxPost(url,params,function(result){
document.getElementById("result").innerHTML=result;
})
}检查名字是否存在的关键客户端代码实现
function doCheck(){//在此函数中向服务端发起异步请求,检测name是否存在 //1.定义请求url var url="doCheck"; //2.定义请求参数 var name=document.forms[0].name.value;
var params="name="+name; //3.发送异步Get请求 doAjaxGet(url,params,function(result){
document.getElementById("result").innerHTML=result;
})
}Ajax 编程框架基本实现(了解)
我们在实际的js编程中经常会以面向对象的方式进行实现，例如2.3章节中doAjaxGet函数如何以对象方法进行应用呢？关键代码分析如下：
(function(){ //定义一个函数，可以将其连接为java中的类 var ajax=function(){} //在变量ajax指向的类中添加成员，例如doAjaxGet函数，doAjaxPost函数 ajax.prototype={
doAjaxGet:function(url,params,callback){ //创建XMLHttpRequest对象，基于此对象发送请求 var xhr=new XMLHttpRequest(); //设置状态监听(监听客户端与服务端通讯的状态) xhr.onreadystatechange=function(){//回调函数，事件处理函数 if(xhr.readyState==4&&xhr.status==200){ //console.log(xhr.responseText); callback(xhr.responseText);//jsonStr }
}; //建立连接(请求方式为Get,请求url,异步还是同步-true表示异步) xhr.open("GET",url+"?"+params,true); //发送请求 xhr.send(null);//GET请求send方法不写内容 },
doAjaxPost:function(url,params,callback){ //创建XMLHttpRequest对象，基于此对象发送请求 var xhr=new XMLHttpRequest(); //设置状态监听(监听客户端与服务端通讯的状态) xhr.onreadystatechange=function(){//回调函数，事件处理函数 if(xhr.readyState==4&&xhr.status==200){ //console.log(xhr.responseText); callback(xhr.responseText);//jsonStr }
}; //建立连接(请求方式为POST,请求url,异步还是同步-true表示异步) xhr.open("POST",url,true); //post请求传参时必须设置此请求头 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //发送请求 xhr.send(params);//post请求send方法中传递参数 }
}
window.Ajax=new ajax();
})()Ajax 技术在Jquery中应用
Jquery 简介
jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
get函数应用,代码如下
//向服务端发送Ajax Get 请求 function doGet(){ //1.定义请求的url var url="doAjaxGet"; //2.定义请求的参数 var params="msg=hello jquery ajax get"; //3.发送异步Get请求 //这里的$符号为jQuery中的一个对象 //get(url[,params][,callback][,dataType])为jquery中的一个ajax函数 $.get(url,params,function(result){ //document.getElementById("result").innerHTML=result; $("#result").html(result);
},"text");//在这个函数中你看到ajax的代码了吗? }post函数应用,代码如下
//向服务端发送Ajax Post 请求 function doPost(){ //1.定义请求的url var url="doAjaxPost"; //2.定义请求的参数 var params="msg=hello jquery ajax Post"; //3.发送异步POST请求 //这里的$符号为jQuery中的一个对象 //post(url[,params][,callback][,dataType])为jquery中的一个ajax函数 $.post(url,params,function(result){//post请求一般用于向服务端提交数据 $("#result").html(result);
});//在这个函数中你看到ajax的代码了吗? }ajax函数应用
//向服务端发送Ajax Post 请求 function doAjax(){ //1.定义请求的url var url="doAjaxGet"; //2.定义请求的参数 var params="msg=hello jquery ajax request"; //3.发送异步Get请求 //这里的$符号为jQuery中的一个对象 $.ajax({
type:"GET",//表示get请求(默认为get),省略不写为Get url:url,//":"左边的内容为语法定义,我们不能修改.":"右边为我们自己定义 data:params,//请求参数 async:true,//true表示异步 success:function(result){ //回调函数 $("#result").html(result);
}
});//在这个函数中你看到ajax的代码了吗? }load函数应用
function doLoad(){ //1.定义请求的url var url="doAjaxGet"; //2.定义请求的参数 var params="msg=hello jquery ajax request"; //3.发送异步Get请求 //在指定位置异步加载url对象的资源, //在当前应用中表示把url对象的资源呈现到#result位置. //$("#result").load(url,params,function(){//回调函数,资源加载完成执行此函数 // console.log("load complete"); //}); $("#result").load(url);//假如不向服务端传值,不需要处理load完以后的结果,还可以这样写 }