Ajax的简单应用

什么是Ajax？

Ajax 即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

Ajax 是一种用于创建快速动态网页的技术。特点：可以在不重新加载整个网页的情况下，对网页的某部分局部刷新

Ajax 的核心是 JavaScript 对象 XmlHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。

//ajax原生代码书写步骤：
function Ajax(methed,url,info,callback){
// 第一步 声明使用Ajax的方法
var xmlhttp=null;
if(window.ActiveXObject){
// IE的情况
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}else{
// 非IE的情况
xmlhttp=new XMLHttpRequest();
}
// 第二步 给这个Ajax设置状态监听
xmlhttp.onreadystatechange=function(){
if(xmlhttp.status==200 && xmlhttp.readyState==4){
// 通过responseText得到服务器响应的数据
var temp=xmlhttp.responseText;
//回调函数
callback(temp);
}
}
// 第三步 设置我的发送信息
info=JSON.stringify(info);
info="data="+info;
//get提交方式
if(methed=="get"){
url=url+"?"+info;
xmlhttp.open(methed,url,true);
xmlhttp.send();
}
//post提交方式
if(methed=="post"){
xmlhttp.open(methed,url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(info);
}
}

jQuery使用Ajax的方法：
$.ajax({
//配置服务器路径
url:"/deleteUser",
//配置请求方式post或者get，那么服务器接收数据的解析方式对应为request.query.name和request.body.name
type:"post",
//使用json方式传递参数
data:{"name":name},
//后天数据处理完成后的回调函数
success:function(data){
使用dom操作处理data
}
});

改正jQuery ajax为同步处理的方法：
query的async:false,这个属性
默认是true：异步，false：同步。
$.ajax({
type: "post",
url: "path",
cache:false,
async:false,
success: function(data){ }
});
有了这个属性可以相对的减少代码运行书序问题，但是如果用的太多，页面假死次数太多。这样反而导致用户体验不佳~！

解决Ajax(异步javascript and xml 处理技术)跨域访问方法：
1.在服务器端添加允许跨域访问的响应头；
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Methods","GET,POST");
2.JSONP解决跨域；
3.采用代理服务器;

AngularJS使用Ajax的方法（函数链）:

//post方式
$http.post("/search",{"name":name}).success(function(data){
/加载成功之后做一些事
}).error(function(e){
//处理错误
});
//get方式
$http.get("/search?name=name").success(function(data){
/加载成功之后做一些事
}).error(function(e){
//处理错误
});

解决Ajax(异步javascript and xml 处理技术)跨域访问方法：
1.在服务器端添加允许跨域访问的响应头；
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Methods","GET,POST");
2.JSONP解决跨域；

服务器：respons.jsonp({"data“：data})

前端：

$(function(){
　　$.ajax({
　　　　type:"get",
　　　　url:"http://lurl地址",
　　　　dataType:"jsonp",
　　　　jsonpCallback:"callback",
　　　　success:function(data'){}
　　});
})

3.采用代理服务器;