1. New Function
这个方法可以利用function构造函数，来转换不符合规范的json
var json = "{'name':'leo'}";
console.log((new Function('','return '+json))())
2.XML
可扩展标记语言，标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言。
2.1 responseXML
作用：将xml数据格式的字符串转成DOM元素
语法：
ajax.responseXML;
使用这个方法转化成的是DOM对象，可以使用DOM方法进行操作，但是不能使用getElementById去获取自定义的标签
2.2 兼容性
2.2.1. chileren
在IE中，不能使用children来获取XML转换的DOM元素的子元素节点
2.2.2 innerHTML和检测IE浏览器
在获取XML标签的内容的时候：
- 标准浏览器（chrome，firefox）可以使用
innerHTML来获取 - IE10以上版本的IE（10,11）浏览器需要使用
textContent来获取 - IE10以下版本（9,8,7）需要使用
text来获取
IE浏览器检测的方法
function getIe(ie){
if(window.navigator.userAgent.toLowerCase().indexOf(ie)!=-1){
return true;
}else{
return false;
}
}
//判断是否是大于IE10的版本
if(getIe('msie 10') || getIe('rv:11')){
fn1('textContent');
}else if(getIe('msie 9')){
fn1('text');
}else{
fn1('innerHTML');
}
2.2.3 onload
在IE8及以下的浏览器中，不支持onload事件。
这个时候我们可以使用onreadystatechange方法来监控请求步骤
在这个方法中，有一个获取步骤返回值的方法:ajax.readyState,在监控ajax的过程中，一般有4个步骤，其中创建AJAX对象的返回值为0，send的返回值为3，完成请求的返回值为4。
所以我们可以在onreadystatechange的时候判断返回值是否为4来进行下一步代码。
如果将onreadystatechange放到send之前，那么在IE下是可以多监听一次（意义不大，因为只有显示为4的时候，才表明流程完毕）
var ajax = new XMLHttpRequest();
ajax.open('get','data.xml',true);
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
//这里是已经onload的状态
}
};
3. HTTP状态码
HTTP状态码（HTTP Status Code）是用以表示网页服务器HTTP响应状态的3位数字代码。它由 RFC 2616 规范定义的，并得到RFC 2518、RFC 2817、RFC 2295、RFC 2774、RFC 4918等规范扩展。
一般来说，在HTTP状态码中，以2开头的返回信息是成功（200-299），以3开头的是重定向，以4开头的是请求错误，以5开头的是服务器错误。
获取HTTP状态码的方法是：
ajax.status
根据状态码的规则，我们只需要判断 ajax.status>200&&ajax.status<299 || ajax.status == 304 ,那么证明返回了正确的结果。
HTTP状态码304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。
var ajax = new XMLHttpRequest();
ajax.open('get','data.xml',true);
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
//这里是已经onload的状态
if(ajax.status=>200&&ajax.status<=299 || ajax.status == 304){
//这里是通讯成功执行的代码
}else{
//这里是通讯失败执行的代码（页面跳转之类的）
}
}
};
4. 封装简单的AJAX函数
/*
* method : 发送方式
* url:接口地址
* data：查询字段
* dataType：返回数据类型
* succ：返回成功的的回调函数
* fade：返回失败的回调函数
*/
function fnAjax(ajaxJson {
var ajaxJson = {
method : ajaxJson.method || "get", //默认为get
url:ajaxJson.url || "",
data: ajaxJson.data || "",
dataType : ajaxJson.dataType || "json",
succFn: ajaxJson.succFn || "",
fadeFn:ajaxJson.fadeFn || ""
};
var ajax = new XMLHttpRequest();
//判断发送方式
if(ajaxJson.method.toLowerCase() == "get"){
//发送方式为get
ajax.open(ajaxJson.method,ajaxJson.url + "?" + encodeURI(ajaxJson.data) + "&" + new Date().getTime(),true);
ajax.send();
}else {
//发送方式为post
ajax.open(ajaxJson.method,ajaxJson.url,true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send(ajaxJson.data)
}
//返回信息
ajax.onreadystatechange = function () {
if(ajax.readyState == 4){
if(ajax.status >=200 && ajax.status<=299 || ajax.status == 304){
//返回成功
//判断ajaxJson.succFn是否是函数
if(ajaxJson.succFn && typeof ajaxJson.succFn == "function"){
if(ajaxJson.dataType.toLowerCase() == "json"){
//需要将返回的json转化为一个对象
//ajaxJson.succFn(JSON.parse(ajax.responseText));
//如果json的格式不对，需要使用eval来转换格式
ajaxJson.succFn(eval('('+ajax.responseText+')'));
//将返回结果传入succ函数中
}else if(ajaxJson.dataType.toLowerCase() == "xml"){
//数据类型是XML
ajaxJson.succFn(ajax.responseXML);
}else {
//数据类型是字符串
ajaxJson.succFn(ajax.responseText);
}
}
}else {
//返回失败后执行的函数
if(fadeFn && typeof fadeFn == "function"){
ajaxJson.fadeFn(ajax.status);
}
}
}
};
}
5.同步和异步
5.1 同步
当请求发送完成之后，send() 会挂起，一直等到服务器返回了相关信息（请求完全结束）之后，才会返回并继续执行后面的代码。
下一段代码，必须等待上一段代码执行完毕才会运行
5.2 异步
当请求发送完成之后，send() 就会立即返回，继续执行send() 后面的代码。
下一段代码，不用等待上一段代码执行就可以运行了
网友评论