第一次写博客，关于AJAX的异步交互

最新推荐文章于 2024-08-20 15:23:16 发布

YiZhiCXY

最新推荐文章于 2024-08-20 15:23:16 发布

阅读量2.1k

点赞数

分类专栏：前后台交互文章标签： ajax

前后台交互专栏收录该内容

2 篇文章 0 订阅

订阅专栏

15/11/28 阴
作为一名大三上的伪程序猿，现阶段虽然是个菜鸟，今天开始也要跟着大牛的脚步，学习写博客这么高逼格的东西…
不多说，进入正题吧，下面算是对最近刚学的AJAX的一个复习吧

AJAX（Async重点内容hronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。AJAX最大的特点就是当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。
广泛应用于搜索提示，注册提前验证等..

优点：
AJAX使用Javascript技术向服务器发送异步请求；
AJAX无须刷新整个页面；
因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；
缺点：
AJAX并不适合所有场景，很多时候还是要使用同步交互；
AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；

AJAX有四大步：
1、创建对象，得到XMLHttpRequest
var xmlHttp = new XMLHttpRequest();支持大部分浏览器
var xmlHttp = new ActiveXObject(“Msmxl2.XMLHTTP”)支持IE6
var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”)支持IE5.5及以下
编写创建XMLHttpRequest对象的函数

 function createXMLHttpRequest() {
      try {
          return new XMLHttpRequest();
      } catch(e) {
          try {
          return new ActiveXObject("Msxml2.XMLHTTP");
      } catch(e) {
          try {
              return new ActiveXObject("Microsoft.XMLHTTP");
          } catch(e) {
              alert("哥们儿，你用的是什么浏览器啊？");
              throw e;
          }
      }
      }
  }

2、打开与服务器的连接，open方法
当得到XMLHttpRequest对象后，就可以调用该对象的open()方法打开与服务器的连接了。open()方法的参数如下：
open(method, url, async)
method请求方式：可以是GET或POST
url请求的URL：指定服务器端资源，例如；/day23_1/AServlet
async请求是否为异步：默认为true,如果为true表示发送异步请求，否则同步请求！

3、发送请求
当使用open打开连接后，就可以调用XMLHttpRequest对象的send()方法发送请求了。
xmlHttp.send(null)：如果不给可能会造成部份浏览器无法发送！
参数：就是请求体内容！如果是GET请求，必须给出null。
4、接受服务器响应
当请求发送出去后，服务器端Servlet就开始执行了，但服务器端的响应还没有接收到。接下来我们来接收服务器的响应。
在xmlHttp对象的一个事件上注册监听器：onreadystatechange，它会在XMLHttpRequest对象的状态发生变化时被调用。
xmlHttp对象一共有5个状态：

0状态：刚创建，还没有调用open()方法;
1状态：请求开始：调用了open()方法，但还没有调用send()方法
2状态：调用完了send()方法了；
3状态：服务器已经开始响应，但不表示响应结束了！
4状态：服务器响应结束！（通常我们只关心这个状态！！！）

得到xmlHttp对象的状态：
var state = xmlHttp.readyState;//可能是0、1、2、3、4
得到服务器响应的状态码
var status = xmlHttp.status;//例如为200、404、500
得到服务器响应的内容1

     var content = xmlHttp.responseText;//得到服务器的响应的文本格式的内容
     var content = xmlHttp.responseXML;//得到服务器的响应的xml响应的内容，它是Document对象了！

     xmlHttp.onreadystatechange = function() {//xmlHttp的5种状态都会调用本方法
         if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//双重判断：判断是否为4状态，而且还要判断是否为200
          // 获取服务器的响应内容
         var text = xmlHttp.responseText;
         }
     };

如果要发送POST请求(如果发送请求时需要带有参数，一般都用POST请求)
open：xmlHttp.open("POST" ....);
添加一步：设置Content-Type请求头：
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
发送请求时指定请求体：
send：xmlHttp.send("username=zhangSan&password=123");
如果响应内容为xml数据
服务器端：
设置响应头：ContentType，其值为：text/xml;charset=utf-8
客户端：
var doc = xmlHttp.responseXML;//得到的是Document对象!