ajax

发布时间：2020-12-15 21:38:31 所属栏目：百科来源：网络整理

导读：在最近一次面试上不幸被问到了，原以为很熟悉的东西你会发现你对他根本不熟悉！要说熟悉AJAX的话你需要毫不犹豫回答以下问题： 1 不同浏览器下ajax实现上的差异 2 一次ajax请求过程中有哪几种状态值,不同状态值之间含义是什么 3 ajax在跨域的情况下会出现什

在最近一次面试上不幸被问到了，原以为很熟悉的东西你会发现你对他根本不熟悉！要说熟悉AJAX的话你需要毫不犹豫回答以下问题：

1 不同浏览器下ajax实现上的差异
2 一次ajax请求过程中有哪几种状态值,不同状态值之间含义是什么
3 ajax在跨域的情况下会出现什么状况，以及解决方案
4 ajax和后台数据交互时会有什么编码问题吗？
5 最后可以说说XMLHttpRequest2有什么新东西

怎么样？各位能轻易的答上以上4点，便可直接忽略此文，若是只能很含糊的说出1、2点的话，便硬着头皮看我这篇水文吧，呵呵。

：

ajax全称：Asynchronous JavaScript and XML 即传说中的“异步JavaScript和XML”，他是由html、js、Dom等组成，这一杰出的技术可以将笨拙的web界面变成交互性的ajax应用程序。

ajax是一种构建网站的强大方法，他让我们桌面上只剩一个浏览器的想法不再是空谈，不再是妄想，虽说不大可能。。。

曾经我们的页面需要等待，等待服务器响应，等待屏幕刷新，等待请求返回和生成新页面。ajax的出现就让web页面的等待变得不那么明显，虽说只是感觉罢了（跟和美女在一起似的，感觉很爽）。。。

在一般的web应用程序中，用户提交表单后将整个表单发送到服务器，服务器将它转发给后台脚步（.net,java,php），脚步执行结束后将生成的新的htm页面返回，这个过程中就会出现我们前面所说的等待：屏幕变得一片空白，等待返回数据在重新绘制，这种交互性就跟你和一个美女XXOO每隔10秒才能动一下似的，这种感受，这种交互性怎一个差字了得？？？

ajax基本就是把js对象XMLHttpRequest对象放在web表单和服务器之间，当用户提交数据时只是将数据提交给js，然后由js发送给服务器并获取返回数据修改页面，过程中不会出现闪烁、消失或者延迟，传说中的异步请求。。。

XMLHttpRequest

该js对象为ajax的核心，前面说过了XmlHttpRequest是一套可以在Javascript脚本语言中通过http协议传送或接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。

首先我们来创建一个xml对象，需要注意兼容，我们先来个管中窥豹：

初始化

ajax的请求响应模型

ajax基本流程基本如下：

1 从web表单中获取所需数据（不用表单也行）
2 建立连接url
3 打开服务器连接
4 设置数据返回回调函数
5 发送请求

xmlHttp.open('GET',url,true);
xmlHttp.onreadystatechange = function (e) {};
xmlHttp.send(null)

open时，最后一个参数为true将建立异步连接，false将等待服务器响应

onreadystatechage 可以指定数据返回时回调函数

send便是发送请求，参数便是要传的参数，没有参数可以填null

我们来写段后台程序试试：

复制代码

1  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2  
 3  <html xmlns="http://www.w3.org/1999/xhtml">
 4  <head>
 5      <title></title>
 6  </head>
 7  <body>
 8  
 9  </body>
10  <script type="text/javascript"> 11 var xmlHttp = false; 12 function createXMLHttpRequest() { 13 if (window.XMLHttpRequest) { 14 try { 15 xmlHttp = new XMLHttpRequest(); 16 } catch (e) { 17 xmlHttp = false; 18 } 19 } else { 20 try { 21 xmlHttp = new ActiveXObject('Msxml2.XMLHTTP'); 22 } catch (e) { 23 try { 24 xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); 25 } catch (ee) { 26 xmlHttp = false; 27 } 28 } 29 } 30 } 31 32 createXMLHttpRequest(); 33 if (xmlHttp) { 34 xmlHttp.open('GET','ajax.ashx',true); 35 xmlHttp.onreadystatechange = function (e) { 36 var tmp = xmlHttp.responseText; 37 var s = ''; 38 } 39 xmlHttp.send(); 40 41 } 42 43 44 var s = ''; 45 </script>
46  </html>

复制代码

1 <%@ WebHandler Language="C#" Class="ajax" %>
 2 
 3 using System;
 4 using System.Web;
 5 
 6 public class ajax : IHttpHandler {
 7     
 8     public void ProcessRequest (HttpContext context) {
 9         context.Response.ContentType = "text/plain";
10         string name = context.Request.QueryString["name"] == null ? "" : context.Request.QueryString["name"].ToString();
11         context.Response.Write("ajax 返回：" + name);
12     }
13  
14     public bool IsReusable {
15         get {
16             return false;
17         }
18     }
19 
20 }

复制代码
其实我们定义的会函数会被执行三次，状态码依次返回2,3,4，现在我们来看看这个状态码是什么：

xmlHttp.readyState:

0 ：未初始化，还没有调用send()方法 
1 ：载入，已调用send()方法，正在发送请求 
2 ：载入完成，send()方法执行完成，已经接收到全部响应内容 
3 ：交互，正在解析响应内容 
4 ：完成，响应内容解析完成，可以在客户端调用了

意思是我们只需要关注4便可以了。

若是页面采用utf-8编码，而服务器采用gbk的话，也许会出现编码问题，甚至引起莫名其妙的BUG：

2.0改进：可以设置HTTP请求的时限。可以使用FormData对象管理表单数据。可以上传文件。可以请求不同域名下的数据（跨域请求）。可以获取服务器端的二进制数据。可以获得数据传输的进度信息。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!