使用Ajax发送异步请求

步骤如下:

1.获取Ajax对象,获取XMLHttpRequest对象示例;

var xhr = getXhr();    // 获取Ajax对象
function getXhr(){
    var xhr = null;
    if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
    }else{
    xhr = new ActiveXObjeict('Microsoft.XMLHTTP');
}
    return xhr;
}

2.设置回调函数:为Ajax对象的onreadystatechange事件设置响应函数;

functionc fn(){    //回调事件处理函数
  if(xhr.readyState == 4 && xhr.status == 200){
    var txt = xhr.requestText;
    //DOM操作
}

2.创建请求:调用XMLHttpRequest对象的open方法;

xhr.open('get','xx.do',true);
//注意:
  true:表示发送异步请求(当Ajax对象发送请求时,用户仍然可以对当前页面做其他的操作)。
  false:表示发送异步请求(当Ajax对象发请求时,浏览器会锁定当前页面,用户不能对当前页面做其他操作)。
xhr.open('post','xx.do',true);  //创建请求post
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
  //setRequestHeader的作用:因为HTTP协议要求发送post请求时,必须要有content-type消息头,但是默认情况下xhr(即Ajax对象)不会添加该消息头,所以,需要调用setRequestHeader方法,添加这个消息头。

4.发送请求:调用Ajax对象的send方法。

 GET   请求:xhr.send(null); 
 POST  请求:xhr.send(name = value & name = value...);

GET请求:
   -- send方法内传递null
   -- 若要提交数据,则在open方法的'URL'后面追加
   -- 如:xhr.open("get","xx.do?name = value & name = value",true);

服务器返回的一般是部分数据,比如一个简单的文本。

public void service(HTTPServletRequest request,HTTPServletResponse response) throws ServletException,IOException{
   request.setCharacterEncoding("text/html;charset=utf-8");
PointWriter out = response.getWriter();
out.println("用户名已经存在");
}

Ajax的适应用场景:

 1.输入的值需要检验,如检测注册的用户名是否已被占用;
 2.搜素时出现的自动提示列表;
 3.级联显示;
 4.数据录入和列表显示在同一个页面;
 5.不需要刷新的翻页;
 6.使用Ajax技术,验证注册时填写用户名是否可用,并输出提示。
 ...... 

Ajax提供与服务器异步通信的能力,从而使用户从请求/响应的循环中解脱出来。借助于Ajax可以在用户单击按钮时使用JavaScript和DHTML立即更新UI,并向服务器发送请求,以执行更新或查询数据库。当请求返回时,就可以使用JavaScript和css来相应的更新UI,而不是刷新整个页面。最重要的是,用户甚至不知道浏览器正在与服务器通信,web站点看起来是即时响应的。

标签

发表评论