Ajax的跨域

Ajax用于异步更新网页的内容，在不更新整个网页的状态下，更新页面某一个模块的内容。

通常通过对数据库内容的读取获取数据，异步更新状态，也有对数据整合网站的接口api进行数据的获取

例子：

电商网站 商品类别的更新，在手机目录下通过切换不同的品牌，获取不同品牌的手机信息，页面没有刷新，内容刷新了。

在购物车界面 点击加入购物车，提交到数据库（post方法），在结算界面获取购物车的详情（get方法）。

在Ajax中，有get的方法和post方法

在jquery中

Ajax使用的方法为

$.ajax({

type:"提交的方式（post/get）",  //使用$.ajax时候必填

url:"提交的地址"，  //提交的地址

data:{"key1":"value1","key2":"value2"}  ，//传入的内容

dataType:"类型",  //服务器返回的数据类型（json,jsonp）

jsonp:"jsonpCallback" ,//jsonp返回中的回调函数

async:true,//布尔值，是否异步请求，默认true，false为同步

success：function（obj）{

}，//成功请求后的回调函数，obj为服务器传回来的数据

error:function（obj）{

}//失败请求访问的函数

})

GET方法

$.get({

type:"提交的方式（post/get）",  //使用$.ajax时候必填，使用get时候不用填写

url:"提交的地址"，  //提交的地址

data:{"key1":"value1","key2":"value2"}  ，//传入的内容

dataType:"类型",  //服务器返回的数据类型（json,jsonp）

jsonp:"jsonpCallback" ,//jsonp返回中的回调函数

async:true,//布尔值，是否异步请求，默认true，false为同步

success：function（obj）{

}，//成功请求后的回调函数，obj为服务器传回来的数据

error:function（obj）{

}//失败请求访问的函数

})

POSY方法

$.get({

type:"提交的方式（post/get）",  //使用$.ajax时候必填，使用get时候不用填写

url:"提交的地址"，  //提交的地址

data:{"key1":"value1","key2":"value2"}  ，//传入的内容

dataType:"类型",  //服务器返回的数据类型（json,jsonp）

jsonp:"jsonpCallback" ,//jsonp返回中的回调函数

async:true,//布尔值，是否异步请求，默认true，false为同步

success：function（obj）{

}，//成功请求后的回调函数，obj为服务器传回来的数据

error:function（obj）{

}//失败请求访问的函数

})

JS的原生方法

js的方法有点复杂，但是在没有JQ的情况下也是必须学会掌握的

getXmlHttpRequest方法

function getXmlHttpRequest(){
return XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  //判断非IE浏览器和IE浏览器
}

定义一个get或者post方法

/**
* 处理AJAX的get请求

* @param(String)url 需要使用AJAX请求的地址
* @param(Function) successAJAX请求成功时调用的函数
* @param(Function) failAJAX请求失败时调用的函数
*/

function get(url, success, fail){
ajax('GET', url, null, success, fail); 
}

ajax方法本体

/**
* 处理AJAX的get/post请求
* @param(String)method 请求的方式，get或post
* @param(String) url 需要使用AJAX请求的地址
* @param(JSON)params POST方式时需要传递到服务器的数据
* @param(Function) successAJAX请求成功时调用的函数
* @param(Function) failAJAX请求失败时调用的函数
*/

function ajax(method, url, params, success, fail){
var xml = getXmlHttpRequest();
xml.onreadystatechange = function(){
if (xml.readyState == 4){    4
if (xml.status == 200){
if(success){
success(xml.responseText);
}
}else{ // 服务器出现错误
if(fail){
fail();
}
}
}
};
xml.open(method, url, true);
xml.send();
}

xml.readyState 的状态值

 0 - (未初始化)还没有调用send()方法
　　1 - (载入)已调用send()方法，正在发送请求
　　2 - (载入完成)send()方法执行完成，已经接收到全部响应内容
　　3 - (交互)正在解析响应内容
　　4 - (完成)响应内容解析完成，可以在客户端调用了

xml.status  的状态值

200——请求成功 
201——提示知道新文件的URL 
202——接受和处理、但处理未完成 
203——返回信息不确定或不完整 
204——请求收到，但返回信息为空 
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件 
206——服务器已经完成了部分用户的GET请求 

400——错误请求，如语法错误 
401——请求授权失败 
403——请求不允许 
404——没有发现文件、查询或URl 

总结

ajax在前端网页中为十分重要的一环，是网页是否能动态刷新的关键，是一门必须掌握的技术