JavaScript---ajax

一、基本概念

ajax： Asynchronous Javascript And Xml 用于在不重新加载整个页面的情况下，刷新部分页面

XMLHttpRequest

XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。

XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。

二、ajax操作常用步骤：

1、创建XMLHttpRequest对象

 
     
    function createXMLHttpRequest(){
  //兼容更多的IE浏览器
  var ieTypes =["Microsoft.XMLHttp","Msxml2.XMLHTTP","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.6.0"];
  var xmlhttp;
  //所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
  if(window.XMLHttpRequest){
    xmlhttp =newXMLHttpRequest();
  }else if(window.ActiveXObject){
    for(var i =0; i < ieTypes.length; i++){
     try{
        xmlhttp =newActiveXObject(ieTypes[i]);
        break;
      }catch(ex){
      }
   }
 }
  return xmlhttp;
} 
      
   

2、创建响应XMLHttpRequest对象状态变化的函数

 
      
     XMLHttpRequest对象状态：readyState //HTTP请求状态
  0:请求未初始化
  1:服务器连接已建立
  2:请求已接收
  3:请求处理中
  4:请求已完成，且响应已就绪
XMLHttpRequest.onreadystatechange=function(){} //状态变化，调用函数，事件句柄，当XMLHttpRequest对象的状态发生变化时，会触发此函数
 
status 服务器返回的HTTP请求响应值（本地测试时，该返回值为0）
  200请求成功
  202请求被接收，但处理未完成
  400错误的请求
  404资源未找到
  500服务器内部错误 
          
    

3、创建HTTP请求

open(method,url)创建请求；为避免浏览器缓存，可以在url后添加"?"+newDate().getTime()
open(method,url,asynchronous,user,password)
   method:Post/GET
   url：相对或绝对地址
    asynchronous:是否是异步请求，默认true
   user:
   password:

4、发送HTTP请求

 
     xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  // POST提交，发送之前需要设置HTTP header    设置请求头

send()发送请求
send(body)//无数据发送时，执行send(null)， 内容 var body="name=abc&age=12"

post请求避免中文乱码：
             发送时进行两次编码  encodeURI(encodeURI(queryString))，
            （tomcat解一次，程序再解一次java.net.URLDecoder(string,"UTF-8")）   
    

5、判断异步调用是否成功

 
      
     xmlhttp.onreadystatechange=function(){
  if(xmlhttp.readyState==4){
      if(xmlhttp.status==200||xmlhttp.status==0){//本机调用异步，status为0
            //do something
        }
    }
} 
       
    

6、获取返回的数据

responseText:到目前为止，服务器接收到的响应体 XMLHttpRequest处理时按照UTF-8处理
返回字符串形式的响应
responseXML：对请求的响应
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性

猜你喜欢