Ajax
“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。它使用：
- 使用XHTML+CSS来标准化呈现；
- 使用XML进行数据交换及相关操作；
- 使用XMLHttpRequest对象与Web服务器进行异步数据通信；
- 使用Javascript操作Document Object Model进行动态显示及交互；
- 使用JavaScript绑定和处理所有数据。
1. 新建XMLHttpRequest对象
function createXHR(){
if(typeof window.XMLhttpRequest != undefined){
return new window.XMLHttpRequest();
}else if(window.ActiveXOject != undefined){
var xhr;
var versions = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp2.3.0','MSXML2.XMLHttp'];
for(var i = 0; i<versions.length; i++){
try{
new ActiveXObject(versions[i]);
break;
}catch(e){}
}
return xhr;
}else{
throw new Error('no XHR object available');
}
}
2. 监听readystate事件
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readystate == 4){ func(xhr.responseText); }
}
3. 打开执行URL
xhr.open(method,url,async);
method参数
- GET
- POST,需设置请求头：
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode')，再发送数据：xhr.send('framw=jd&name=zy'),- XMLHttpRequest2定义了FormData类型的参数，可直接发送数据而不用设置请求头：
var data = new FormData();
data.append('name','zy');
xhr.send(data);
aysnc参数
- true：异步请求（默认）
- false：同步请求
4. 发送请求
xhr.send(null);
xhr.readystate详解
0：请求未初始化，还未调用open
1：服务器已建立连接，已经调用open，还未send
2：请求已接收，已经send，未收到响应
3：请求处理中，收到部分响应
4：请求已完成，收到全部响应
参数分析
- GET请求将参数跟在URL后面传递，POST则是作为HTTP消息的实体部分传递
- 由于GET将请求附加在URL后面，而不同浏览器或者操作系统对URL参数有长度限制，因此传递的数据量较小，IE对URL的限制为2038即2K+35字节
- GET请求的数据会被浏览器缓存，如账号密码，有安全问题
- 在服务器端，GET请求使用Request.QueryString获取参数，POST用Request.Form获取参数
- GET纯粹是为了请求资源，如搜索，而POST用于创建资源，例如写数据库等，
优势
每个请求都需从服务器下载整个HTML页面，即页面整体刷新，用户需要等待页面返回才能执行其他操作。
而ajax是将用户的请求交给ajax引擎，由ajax引擎向服务器异步请求数据，即直接和服务器交互，减少了无状态连接的痛苦，避免下载冗余HTML，从而提升响应速度，可使页面局部刷新且不会打断用户的操作，减少用户的等待时间。
ajax引擎是一个复杂的JavaScript应用程序，处理用户请求及和服务器交互。
缺点
ajax下不能使用后退按钮。- 和服务器的交互细节都在浏览器端展示，安全性相对较低
- 浏览器禁用
JavaScript时将不能获取到数据
