Ajax和Jquery学习总结(1)

说到Ajax(Asynchronous JavaScript and Xml)可以说的是它是一项非常优秀的综合技术，它可以完成客户端的异步请求，这里要理解同步和异步请求。
同步是指：发送方发出数据后，等接收方发回响应以后才发下一个 数据包的通讯方式。 

异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

易懂的理解: 异步传输:   你传输吧，我去做我的事了，传输完了告诉我一声   同步传输:  你现在传输，我要亲眼看你传输完成，才去做别的事

它的核心是XmlHttpRequest对象，首先应该创建一个Ajax对象：

/**
* AJAX建立和服务器的连接，接收服务器的请求，处理服务器返回的数据
* 开发步骤：
* 1.创建XMLHttpRequest对象
* 2.接收服务器端的响应
* 3.打开和服务器的链接
* 4.发送数据
*
*/

function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}

//浏览器加载时就创建这个函数
window.onload=function (){
//<input type="button" value="测试服务器连接" id="ok" name="ok"/>

document.getElementById("ok").onclick=function (){
//alert("hello!");

//1 创建XmlHttpRequest对象
var xmlHttp=ajaxFunction();

/**
* 2.接收服务器的响应
* * onreadystatechange事件处理函数由服务器触发，而不是用户
* 在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。通信状态的改变要激发函数的执行
*
*
* readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
*/
xmlHttp.onreadystatechange=function (){
//alert("xxxxxxxxx");
//当请求结束时每个浏览器会把readyState值置为4

//响应发送完毕
if(xmlHttp.readyState==4){
if(xmlHttp.status==200||xmlHttp.status==304){
//接收服务器端返回的数据
var data=xmlHttp.responseText;
alert(data);
}
}

}

/**
* 3打开和服务器的连接
*/
// alert("haha!");
xmlHttp.open("post",
"/JsProject/TestServlet?timeStamp="+new Date().getTime()+"&a=9",true);

/*
* 如果请求方法是post,需要设置Content-Type的类型
* * 该方法必须放置在open方法的后面
*/
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

/**
* 4.向服务器发送数据
* 发送数据到服务器端
* * 如果请求方法是get,此时send方法不能发送数据到服务器端
* 即使发送了数据,服务器端也接收不到,该参数设置null
* * 此时传递参数可以使用url方式传递参数
*/
//xmlHttp.send(null);//get方法不想服务器发送数据，所以为空

xmlHttp.send("b=80&c=name");

}

}

对于JQuery它则封装了很多JS的类库真正实现用更少的代码，做更多的事。使用JQuery与服务器端交互的代码如下：
$(document).ready(function(){
$("#b1").click(function(){
/*
* $("#one").load("load01.jsp",xxx,function(data,textStatus,xmlHttpRequest){});
* * 载入远程HTML文件代码并插入至DOM中。
* * 该方法不是jquery的全部函数,所以必须用对象调用
* * 参数1:请求的url
* * 参数2:发送到服务器的数据,格式:{key01:value01,key02:vlaue02}
* * 参数3:回调函数function(data,textStatus,xmlHttpRequest)
* * data:代表请求返回内容的 data,服务器端返回的内容
* * textStatus:代表请求状态的 textStatus 对象,其值可能为: succuss, error, notmodify, timeout 4 种
* * xmlHttpRequest对象
*
* * 如果没有向服务器传递参数:则此时的请求方法是get
* * 如果向服务器传递参数:则此时的请求方法是post
*
*/
var jsonObj={
username:$("#username").val(),
psw:$("#psw").val()//psw:&("#psw").val()
}

//$("#one").load("load01.jsp",jsonObj,function(data,textStatus,xmlHttpRequest){
$("#one").load("load01.jsp h2",jsonObj,function(data,textStatus,xmlHttpRequest){
// alert(data);
alert(xmlHttpRequest.readyState+" "+xmlHttpRequest.status);
});

});
});

同样的Jquery中提供了类似Ajax中post和get请求的方法：
$().ready(function(){
// $("#b1").click(function(){
// /*
// * $.get("get.jsp",function(data,textStatus){});
// * * 通过远程 HTTP GET 请求载入信息。
// * * 参数1:请求的url
// * * 参数2:发送到服务器的数据.格式:{key01:vlaue01,key02:vlaue02}
// * * 回调函数:function(data,textStatus)
// * * data:服务器返回的数据
// * * textStatus:代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.
// * * 方法的返回值是xmlHttpRequest对象
// */
// var jsonObj={
// username:$("#username").val(),
// psw:$("#psw").val()
// }
//
// var xmlHttp= $.get("get.jsp",jsonObj,function(data,textStatus){
// //alert(data);
// alert(textStatus);
// $("#one").text(data);
// });
// });
/*alert(xmlHttp.readyState);
* alert(xmlHttp.status);
*/

$("#b1").click(function(){
/*
* $.post("get.jsp",function(data,textStatus){});
* * 通过远程 HTTP post 请求载入信息。
* * 参数1:请求的url
* * 参数2:发送到服务器的数据.格式:{key01:vlaue01,key02:vlaue02}
* * 回调函数:function(data,textStatus)
* * data:服务器返回的数据
* * textStatus:代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.
* * 方法的返回值是xmlHttpRequest对象
*/
// var jsonObj={
// username:$("#username").val(),
// psw:$("#psw").val()
// }
//
var jsonObj=$("#form1").serialize();//serialize 连续的，连载 ----序列化

$.post("get.jsp",jsonObj,function(data,textStatus){
//alert(data);
$("#one").text(data);
});
});
});