Ajax异步请求

原生js请求

1.创建异步对象

浏览器兼容性问题

var xhr = null;

try{

// Firefox, Opera 8.0+, Safari等浏览器创建XMLHttpRequest对象的方法

xhr = new XmlHttpRequest();

}catch(e){

   try{

//IE6.0以上的浏览器创建XMLHttpRequest对象的方法

   xhr = new ActiveObject("Msxml2.XMLHTTP")；

   }catch(e){

//IE6.0以下的浏览器创建XMLHttpRequest对象的方法

   try{

   xhr = new ActiveObject("Microsoft.XMLHTTP")；

   }catch(e){

    alert("你的浏览器不支持ajax")；

   }

   }

}

 

2.发送异步请求，有两种分为（get，post）

• get请求直接在url地址后拼接参数

xhr.open("get","login?username"+name,);

• post请求需要设置请求，请求体

xhr.open("post","login")

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

xhr.send("username="name);

3.编写回调函数

xhr.onreadystatechange = function(){

if(xhr.readyStatus == 4  && xhr.status == 200){

console.log(xhr.responseText);

document.querySelector(".showmsg").innerHTML = xhr.responseText;

}

}

jquery请求ajax

$.ajax({

type : "get" ,

url : "" ,//请求的URL地址

date : { },//请求的参数

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

timeout : 3000 , //3秒后无返回提示错误

beforeSend:function(){
 // 发送之前就会进入这个函数
 // return false 这个ajax就停止了不会发 如果没有return false 就会继续
 },
 success:function(data){ // 成功拿到结果放到这个函数 data就是拿到的结果
 },
 error:function(){//失败的函数
 },
 complete:function(){//不管成功还是失败 都会进这个函数
 }

})