【个人笔记】Ajax技术

Ajax简单介绍：

• 全称是Asynchronous JavaScript And XML。
• 它是多种技术合并在一起产生的，并不是一门全新的技术。
• 提供了一种以异步方式与服务器进行通信的机制。
• 其核心是XMLHttpRequest对象。
• 实质上遵循了“客户/服务器端”模式。
• 相当于在用户和服务器之间增加了一个中间层。
• 优点： 采用异步交互的过程，消除了网络交互过程中的处理和等待，使用户操作与服务器响应异步化，达到节约服务器空间以及带宽租用成本的目的。

原生的Ajax：

• 首先需要创建XMLHttpRequest对象。

各类浏览器间如何创建XMLHttpRequest对象实例：

IE5.0+、 IE6.0+	Firefox、Safari、Opera8.0+
ActiveX	本地JavaSciript

实现代码：

function createXMLHttpRequest(){
try{
xmlHttp = new XMLHttpRequest(); //Firefox, Oprea8.0+, Safari
}catch (e) {
try{
xmlHttp = new ActiveXObject(Msxml2.XMLHTTP); //IE6.0+
}catch (e) {
try{
xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); //IE5.5+
}catch (e) {
alert(“你的浏览器不支持ajax”);
return false;
}
}
}
return xmlHttp;
}

• XMLHttpRequset工作流程。

实现代码：

function send(){
var url="/chapter11/codeservlet"; //请求的地址文件
xmlHttp = createXMLHttpRequest(); //获取XMLHttpRequest对象
xmlHttp.onreadystatechange = handleStateChange; //设置回调函数
xmlHttp.open(“GET”, url, true); //设置使用请求方式、请求地址以及是否采取异步
xmlHttp.send(null); // 发送数据，参数为null表示不需要提交数据
}
function handleStateChange(){
if(xmlHttp.readyState == 4){ //表示通信的状态，数字4表示此时响应已经被完全接收
if(xmlHttp.status == 200){ // 返回HTTP响应的数字类型状态码，数字200表示执行正常
$("#code").html(xmlHttp.responseText); // 返回响应数据
}
}
}

readyState(通信的状态)表示XMLHttpRequest对象把一个HTTP请求发送到服务器再到接收到服务器的响应信息。
整个过程经历5种状态：

值	说明
0	此时已经创建XMLHttpRequest对象，但是还没有初始化（未初始化状态）
1	此时已经调用open()方法，并且XMLHttpRequest已经准备好要把一个请求发到服务器（发送状态）
2	此时已经通过send()方法把一个请求发送到服务器，但是还没有收到一个响应（发送状态）
3	此时已经接收到HTTP响应头部信息，但是消息体部分信息还没有完全接收结束（正在接收状态）
4	此时响应已经被完全接收（已加载状态）

status(HTTP响应的数字类型状态码)：

状态码	说明
100	正在继续
200	执行正常
404	未找到页面
500	内部程序错误

JQuery的Ajax：

• 不需要自己创建XMLHttpRequest对象，当你使用jquery的$.ajax()方法时内部自动创建该对象。

需要页面代码中导入jquery的库包：

<script type="text/javascript" src="./js/jquery-1.7.1.js"></script>

• 方法（不齐全）

方法	描述
$.ajax()	通过HTTP请求向服务器载入数据
$.get()	通过HTTP的GET请求向服务器载入数据
$.post()	通过HTTP的POST请求向服务器载入数据

• 参数（不齐全）

参数	描述	默认
url	发送请求的地址	当前页地址
method	发送请求的方法（GET/POST)	GET
contentType	发送信息至服务器时内容的编码类型（application/x-www-form-urlencoded、application/json、multipart/form-data 、text/html）	application/x-www-form-urlencodedform（表单数据被编码为key/value格式发送到服务器）
data	请求到服务器的数据（自动转换为请求字符串格式）
dataType	预期服务器返回的数据类型(text/xml/json/html/script/jsonp)	如不指定，JQuery 将自动根据 HTTP 包 MIME 信息来判断
success	请求成功时回调此函数
error	请求失败时回调此函数

• 实现代码：

function checkUsername(){
var username = $("#username").val();
$.ajax({
url:"/chapter11/checkservlet",
method:‘post’,
contentType:“application/x-www-form-urlencoded”,
data:“username=” + username,
dataType:‘text’,
success:function(data){
var result = data;
if(result.indexOf(“true”) != -1){
$("#checkusername").html(“恭喜你！该用户名有效！”);
}else{
$("#checkusername").html(“抱歉！该用户名已经被注册！”);
}
},
error:function(err){
alert(err);
}
});
}

PS：本文章只是介绍了ajax的作用和简单操作~

【如有理解错误，欢迎纠正！】