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.采用代理服务器;

原文地址:https://www.cnblogs.com/hym881013/p/4547488.html