1. 简介

根据百度百科的解释，ajax全称“Asynchronous Javascript And XML”（异步JavaScript和XML），是一种创建交互式网页的网页开发技术。通过后台与服务器交互进行少量的数据交互，来使网页局部和服务器交互，而不用刷新整个页面。传统的网页中，如果需要刷新页面任何一个地方，就需要刷新整个页面。

ajax的优点：

AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
AJAX 可使因特网应用程序更小、更快，更友好。
AJAX 是一种独立于 Web 服务器软件的浏览器技术。
JavaScript ，XML， HTML， CSS在 AJAX 中使用的 Web 标准已被良好定义，并被所有的主流浏览器支持。AJAX 应用程序独立于浏览器和平台。

AJAX应用的例子：
1. 在搜索中，我们输入关键字时，网页会实时展现搜索结果；这是用AJAX实现的。
2. 使用地图时，地图会根据用户显示的位置不停的更新。这也是通过AJAX实现。
3. 注册时候，实时监测提示用户名时候被注册。

2. ajax的模式

ajax的模式主要是通过在网页前端使用核心对象XMLHttprequest来向后台服务器发起请求，后台响应给前端（txt，xml），这样一来，所有请求的内容和响应的处理都可以在前端使用javascript来处理。

根据ajax的名称可以看出，在ajax中主要使用到的技术有javascript和xml，其实ajax不是一种新技术，而是- 几种技术的组合。主要是：

使用DOM进行动态显示和交互
使用XMLHttpRequest进行数据交换和相关操作
使用javascript将所有内容绑定在一起

3. 请求和响应

ajax中，有一个核心对象XMLHttpRequest，在javascript中使用这个对象来和后台服务器交互达到异步请求的目的；

创建XMLHttpRequest对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象。为了兼容性，使用如下的方式创建XMLHttpRequest对象，虽然IE的创建方式不同，但是XMLHttpRequest在IE中的实现和其他浏览器是一样，使用也一样：

var xmlhttp;
if (window.XMLHttpRequest)
  {
  // for IE7+,Firefox,Chrome,Opera,Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  { 
  // for IE6,IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

请求

将请求发送到服务器，使用 XMLHttpRequest 对象的 open() 和 send() 方法。

open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。
参数：
- method：请求的类型；GET 或 POST。与POST相比，GET更快，但是在发送大量数据和为避免用户输入的内容而出现乱码的情况下，使用POST更好。使用post的时候，需要设置请求头xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
- url：请求的url，文件在服务器上的地址或者Servlet等处理程序的url
- async：true（异步）或 false（同步）
send(String) 将请求发送到服务器。
参数：
- string：仅用于 POST 请求

同步与异步请求：
对于web应用来说，使用ajax的目的就是为了异步请求，所以一般使用异步请求，在响应返回的时候，javascript并不会停止执行，而是继续去处理其他的任务或者脚本，当响应就绪后再对其进行处理。
需要注意的是，使用同步请求的时候，需要在指定响应就绪后的处理，也就是说onreadystatechange处于就绪状态（readyState为4）时候的处理函数。

响应

获得来自服务器的响应，使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

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

4. 请求的状态readyState

XMLHttpRequest对象有三个重要的属性
1. onreadystatechange。是一个事件函数，每当readyState改变的时候，就会调用这个函数。

readyState。XMLHttpRequest的状态信息，也就是说请求的状态信息，一共有五种状态：
- 0请求未初始化
- 1服务器连接已建立
- 2请求已接收
- 3请求处理中
- 4请求已完成，且响应已就绪
status
- 200: “OK”
- 404: 未找到页面

5. HelloWorld

<!DOCTYPE html>
<html>

    <head>
        <Meta charset="utf-8" />
        <title>Ajax helloworld</title>

        <script type="text/javascript"> window.onload = function() { document.getElementsByTagName("a")[0].onclick = function() { //1.创建XMLhttpRequest对象 var request = new XMLHttpRequest(); //创建方法参数 var methoad = "GET"; //创建url参数 var url = this.href; // 2. 调用XMLHttpRequest的open方法。 request.open(methoad,true); // 2.调用XMLHttpRequest的send方法 request.send(null); // 3.为XMLHttpRequest添加onreadystatechange事件 request.onreadystatechange = function() { //请求已经完成 if(request.readyState == 4) { //并且请求可用 if(request.status == 200) { document.getElementById("p").firstChild.nodeValue = request.responseText; //var para = document.createElement("p"); //var node = document.createTextNode(request.responseText); //para.appendChild(node); //document.getElementById("p").appendChild(para); } } } //取消点击链接的默认事件 return false; } } </script>
    </head>

    <body>
        <p> 点击链接后异步请求服务器上的hello.txt文件，显示在下方，不刷页面</p>
        <a href="hello.txt">AAAAA</a>
        <hr />
        <div id="p">
            <p></p>
        </div>

    </body>

</html>

原文地址：https://www.jb51.cc/ajax/161772.html

Ajax异步请求