Ajax异步请求

来源：互联网发布：视频特效软件下载编辑：程序博客网时间：2024/06/15 05:58

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, url, 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>

1 0