Ajax（asynchronousjavascriptandxml）

（1）、什么是Ajax?
Ajax是一种用来改善用户体验的技术，其实质是利用浏览器内部的一个特殊对象
（XMLHttpRequest对象，一般称之为一个Ajax对象）向服务器发送请求（在发送请求时，浏览器不会销毁当前页面，
用户仍然可以对当前页面做其他的任何操作），服务器返回部分数据（不是一个完整的页面），
在浏览器端，利用服务器返回的这些数据更新当前页面。整个过程，页面无刷新，不打断用户的操作。
补充：
javascript组成部分：
（1）、ECMAScript（语言基础规范）[由ECMA组织定义的]
（2）、DOM[由W3C定义的]
（3）、BOM（浏览器内部本身就有的对象）
XMLHttpRequest对象属于BOM
（2）、如何获得Ajax对象
functiongetXHR(){
varxhr=null;
if(window.XMLHttpRequest){
xhr=newXMLHttpRequest();
}else{
xhr=newActiveXObject('MicroSoft.XMLHttp');
}
returnxhr;
}

（3）、Ajax的属性
1）、onreadystatechange:绑定事件处理函数，处理readystatechange事件
（当Ajax对象的readState属性值发生改变，比如从0变成1，就会产生该事件）
2）、responseText:Ajax对象获得服务器返回的文本数据
3）、responseXML:Ajax对象获得服务器返回的XML文档
4）、status:Ajax获得服务器返回的状态码
5）、readyState:表示Ajax对象与服务器进行通信的状态，有5个值，分别是0,1,2,3,4
4：表示Ajax对象已经成功的获取了服务器返回的所有数据

（4）、Ajax编程步骤
1）、先获得Ajax对象
比如:varxhr=getXHR();
2）、使用xhr对象发送请求
a.发送get请求
xhr.open('get','check_username.do?username=tom',true);
true:表示发送异步请求，这是默认值
false:表示发送同步请求（发起同步请求，页面依然存在，但是浏览器会把该页面锁定，
用户不能对该页面做其他操作，同步请求在一些特殊情况下有用）
xhr.onreadystatechange=fn;//绑定一个事件处理函数，fn后面不能加括号，加括号表示立马调用fn函数
xhr.send(null);//该函数执行后，xhr对象将会请求数据包发送出去，get方式的请求要给send函数传一个参数null
b.发送post请求
xhr.open('post','check_username.do',true);
//post请求需要添加一个content-type消息头（Ajax默认情况下不会添加content-type消息头）
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
xhr.onreadystatechange=fn;
xhr.send('username=tom');//请求参数放在send方法中
3）、编写服务器断的处理逻辑，一般只需要返回部分数据
4）、编写事件处理函数（处理服务器返回的数据）
functionfn(){
//只有其值等于4，才能获得服务器返回的所有数据
if(xhr.readyState==4){
//获得服务器返回的文本
vartxt=xhr.responseText;
//更新（执行DOM操作）
}
}

（5）、编码问题
1）、发送get请求
a.产生乱码问题的原因
ie浏览器对应的Ajax对象对中文参数值会使用gbk进行编码，
而其他浏览器会使用utf-8进行编码。
web服务器默认情况下，会使用ISO-8859-1进行解码。
b.解决方式
①、让浏览器使用统一的编码方式进行发送请求，使用encodeURI函数对请求地址进行编码，
该函数会对其中的中文参数值按照utf-8进行编码处理。
②、让服务器统一使用同一种编码方式进行解码，可以修改tomcat的配置文件。（conf/server.xml）
对<Connector>添加URIEncoding="utf-8"，web服务器会对get请求的URI使用utf-8进行编码。

2）、发送post请求
a.产生乱码问题的原因
所有浏览器对应的Ajax对象对中文参数都使用utf-8进行编码，
服务器使用ISO-8859-1进行解码。
b.解决方法

request.setCharacterEncoding("UTF-8");

jQuery对Ajax编程的支持

（1）、load a.作用：将服务器返回的数据直接添加到符合要求的结点之上。 b.用法：$obj.load(请求地址,[请求参数]); 比如：$obj.load('price.do','flight=CA1000'); 请求参数有两种形式： ①、请求字符串:username=tom&age=22 ②、对象：{'username':'tom','age':22} load方法如果有参数，会发送post请求，没有参数会发送get请求 缺点：不能处理服务器返回来的数据 （2）、$.get和$.post 用法： $.get(url,[请求参数],[callback],[type]); 回调函数是用来处理服务器返回来的数据，格式如下： function(data,status){ //data:服务器返回的数据(当服务器返回的数据是json字符串的话，$.get、$.post函数会自动将json字符串转换为js对象) //status:状态的描述 } type:服务器返回的数据类型(默认是html)，有以下几种： html,text,json,xml,script：javascript脚本 请求参数有两种形式： ①、请求字符串:username=tom&age=22 ②、对象：{'username':'tom','age':22} --------------------------------------------------- 以上三个方法只能发送异步请求，而且不能处理异常 （3）、$.ajax 用法：$.ajax({'选项名':'选项值'});//传入一个对象 常见的选项名称： url:请求地址 type:请求类型(get、post,默认是get请求) data:请求参数(两种形式，同上) dataType：服务器返回的数据类型(同上三个方法的type) success:该函数来处理服务器返回的数据 error：服务器出错，调用该函数 async：true（默认值:异步）、false(同步) 27、缓存问题 （1）、什么是缓存问题？ ie浏览器提供的Ajax对象，当发送get请求时，会检查请求地址是否访问过， 如果访问过，就不再发送请求。 （2）、解决方式 a.方式一： 在请求地址后面添加一个随机数 比如：'price.do'+math.random() b.方式二: 发送post请求 Ajax的优点： （1）、改善用户的体验：不打断用户的操作，页面无刷新 （2）、提升程序性能：可以按照需要获取数据（浏览器与服务器之前交互的是数据） （3）、Ajax是一种标准化的技术：不需要下载任何的插件，有些类似Ajax技术，比如Flex，是需要下载插件

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!