ajax----发送异步请求的步骤

1)获取(创建)Ajax对象:获取XMLHttpRequest对象
2)创建请求:调用xhr的open方法
3)在发送请求之前需要设置回调函数:绑定指定xhr的onreadystatechange事件
4)调用send()方法发送请求

//创建XMLHttpReuquest 对象
function createXhr() {
var xhr = null;
//浏览器判断
if (window.XMLHttpRequest) {
//可以直接new出来对象的说明是IE7、8、9 Chrome、FireFox等浏览器
xhr = new XMLHttpRequest();
} else {
//这样的就是IE 5.5、 IE 6等低版本的浏览器
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
//创建异步请求方法get
function getServerText() {
//获取xhr
var xhr = createXhr();
//创建请求
xhr.open("get", "server.php", "true");//true表示异步请求
//设置回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
//服务器已经正确处理请求且正确响应数据到客户端
var resText = xhr.responseText;//返回服务器响应文本
//获取服务器响应给客户端的文本即server.php中的文本内容
document.getElementById("showText").innerHTML = resText;
}
}
//发送请求
xhr.send(null);//请求方式为get,所以请求体必须是null
} 实例:模拟服务器发送请求

ajax提交数据(get方法):


$(document),ready(function(){
   $("#txtName").blur(function(){
  1)获取xhr
  var xhr =createxhr();


  2)创建请求
  var name = $("#txtName").val();
  var url = "checkname.jsp?name="+name;
  xhr.open("get",url,true);

  3)设置回调函数

  xhr.onreadystatechange = function(){

  if(xhr.readyState==4 && xhr.status==200){
  //服务器已经正确处理请求且正确响应数据到客户端
   var resText= xhr.responseText;//返回服务器响应文 本

  $("#txtNameTip").html(resText);//获取响应回来的 数据

     }
  }


  4)发送请求


  xhr.send (null);//get发送请求的方法
    });


  });

 
//创建异步请求方法post

$(document),ready(function(){
    $("#txtName").blur(function(){
  1)获取xhr
    var xhr =createxhr();

  2)创建请求
    var name = $("#txtName").val();
    var url = "checkname.jsp";
    xhr.open("post",url,true);
     xhr.setRequestHeader("Content-Type","application/x-www-
form-urlencoded");

3)设置回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){ //注意顺序
//服务器已经正确处理请求且正确响应数据到客户端
var resText= xhr.responseText;//返回服务器响应文


$("#txtNameTip").html(resText);//获取响应回来的

数据
}
}

4)发送请求

xhr.send ("name="+name);//Post方法发送方法

注意:必须在创建请求之后,发送请求之前使用setRequestHeader

()显示更改Content-Type消息头的值为
application/x-www-form-urlencoded ,否则获取不到传递过去的

数据
})

});


上一篇:sublime 3 build结果关闭打开


下一篇:一步一步学习SignalR进行实时通信_6_案例