AJAX

AJAX即“Asynchronous Javascript And XML”，是指一种创建交互式网页应用的网页开发技术。AJAX 是一种用于创建快速动态网页的技术。它可以令开发者只向服务器获取数据（而不是图片，HTML文档等资源），互联网资源的传输变得前所未有的轻量级和纯粹。

Ajax实际上是下面这几种技术的融合：

XHTML和CSS的基于标准的表示技术
DOM进行动态显示和交互
XML和XSLT进行数据交换和处理
XMLHttpRequest进行异步数据检索
Javascript将以上技术融合在一起

客户端与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术

————可以进行局部刷新

XMLHttpRequest

浏览器是先把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，然后再发送给服务器。服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器

XMLHttpRequest异步对象会不停监听服务器状态的变化，得到服务器返回的数据，就写到浏览器上【因为不是转发的方式，所以是无刷新就能够获取服务器端的数据】

api

open()(String method,String url,boolean asynch,String username,String password)
send(content)
setRequestHeader(String header,String value)
getAllResponseHeaders()
getResponseHeader(String header)
abort()

常用的方法就是黑色粗体的前三个

open()：该方法创建http请求
- 第一个参数是指定提交方式(post、get)
- 第二个参数是指定要提交的地址是哪
- 第三个参数是指定是异步还是同步(true表示异步，false表示同步)
- 第四和第五参数在http认证的时候会用到。是可选的
setRequestHeader(String header,String value)：设置消息头（使用post方式才会使用到，get方法并不需要调用该方法）
- xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
send(content)：发送请求给服务器
- 如果是get方式，并不需要填写参数，或填写null
- 如果是post方式，把要提交的参数写上去

属性

onreadystatechange：请求状态改变的事件触发器（readyState变化时会调用此方法），一般用于指定回调函数
readyState：请求状态readyState一改变，回调函数被调用，它有5个状态
- 0：未初始化
- 1：open方法成功调用以后
- 2：服务器已经应答客户端的请求
- 3：交互中。Http头信息已经接收，响应数据尚未接收。
- 4：完成。数据接收完成
responseText：服务器返回的文本内容
responseXML：服务器返回的兼容DOM的XML内容
status：服务器返回的状态码
statusText：服务器返回状态码的文本信息

ajax的使用

创建XMLHttpRequest对象

<script type="text/javascript">

    var httpRequest;

    if(window.XMLHttpRequest) {

        //在IE6以上的版本以及其他内核的浏览器(Mozilla)等
        httpRequest = new XMLHttpRequest();
    }else if(window.ActiveXObject) {

        //在IE6以下的版本
        httpRequest = new ActiveXObject();
    }

</script>

向服务器发送请求

    1. xhr.open(method,url,async);  
    2. send(string);//post请求时才使用字符串参数，否则不用带参数。

method：请求的类型；GET 或 POST

url：文件在服务器上的位置

async：true（异步）或 false（同步） 注意：post请求一定要设置请求头的格式内容

1
2
3

xhr.open("POST","test.html",true);  
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
xhr.send("fname=Henry&lname=Ford");  //post请求参数放在send里面，即请求体

服务器响应处理

responseText 获得字符串形式的响应数据。

responseXML 获得XML 形式的响应数据。

①同步处理

1
2
3

xhr.open("GET","info.txt",false);  
xhr.send();  
document.getElementById("myDiv").innerHTML=xhr.responseText; //获取数据直接显示在页面上

②异步处理

相对来说比较复杂，要在请求状态改变事件中处理。

xhr.onreadystatechange=function()  { 
	  if (xhr.readyState==4 &&xhr.status==200)  { 
	       document.getElementById("myDiv").innerHTML=xhr.responseText;  
	     }
}

跨域

AJAX跨域完全讲解 - SegmentFault 思否

面试题

AJAX面试题都在这里 - SegmentFault 思否

rhb_blog

JavaWeb学习（十二）——AJAX