AJAX

什么是AJAX?

AJAX是异步Javascript和XML(Asynchronous Javascript And XML)。简单点说,就是使用XMLHttpRequest对象与服务器通信。

它可以使用JSON,XML,HTML和文本等多种格式发送和接受。AJAX最吸引人的就是它的‘异步特性’,也就是说他可以在不刷新页面的

情况下与服务器通信,交换数据,更换页面。

主要做的事:

1、在不重新加载的页面情况下发送请求给服务器;

2、接受并使用从服务器发来的数据;

 

第一步:XMLHttpRequest对象发送http请求,

// Old compatibility code, no longer needed.
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

发送一个请求后,会收到响应。在这一阶段,你要告诉XMLHttp请求对象是由哪一个JavaScript函数处理响应,在设置了对象的

onreadystatechange属性后给他命名,当请求状态改变时间函数

httpRequest.onreadystatechange = nameOfTheFunction;

要注意的是,函数名后没有参数,因为你把一个引用赋值给了函数,而不是真正的调用了它。此外,如果不使用函数名的方式,你还

可以用JavaScript的匿名函数响应处理的动作。就像下面这样:

httpRequest.onreadystatechange = function(){
    // Process the server response here.
};

接下来,声明当你接到响应后的要做什么,你要发送一个实际的请求吗,通过调用HTTP请求对象的open()和send()方法,像

下面这样:

httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();

1.open()的第一个参数是HTTP请求方法,有GET,POST,HEAD以及服务器支持的其他方法。保证这些方法一定要是大写字母,否则

其他一些浏览器(比如FireFox)可能无法处理这个请求;

2.第二个参数是要发送的URL。由于安全原因,默认不能调用第三方URL域名。确保你在页面中使用的是正确的域名,否则在调用open()方法是会有“权限被拒绝”错误提示。一个容易犯的错误是你企图通过domain.tld访问网站,而不是www.domain.tld。

3.第三个参数是可选,用于设置请求是否是异步的。如果设为true(默认设置),javascript执行会持续,并且在服务器还没有响应的情况下与页面进行交互。

send()方法的参数可以是任何你想发送给服务器的内容,如果是POST请求的话。发送表单数据时应该用服务器可以解析的格式,想查询语句:

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

或者其他格式, 类似 multipart/form-data,JSON,XML等。

如果你使用 POST 数据,那就需要设置请求的MIME类型。比如,在调用 send() 方法获取表单数据前要有下面这个:

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

第二步 处理器服务器响应

在发送请求时,你提供的Javascript函数名负责处理响应

httpRequest.onreadystatechange = nameOfTheFunction;

这个函数应该做什么?首先,函数要检查请求的状态。如果状态的值是XMLHttpRequest.DONE(对应的值是4),意味着服务器

响应收到了并且是没有问题的,然后就可以继续执行。

if (httpRequest.readyState === XMLHttpRequest.DONE) {
    // Everything is good, the response was received.
} else {
    // Not ready yet.
}

全部readyState状态值都在 XMLHTTPRequest.readyState,如下也是:

  • 0 (未初始化) or (请求还未初始化)
  • 1 (正在加载) or (已建立服务器链接)
  • 2 (加载成功) or (请求已接受)
  • 3 (交互) or (正在处理请求)
  • 4 (完成) or (请求已完成并且响应已准备好)

    接下来,
if (httpRequest.status === 200) {
    // Perfect!
} else {
    // There was a problem with the request.
    // For example, the response may have a 404 (Not Found)
    // or 500 (Internal Server Error) response code.
}

在检查完请求状态和HTTP响应码后,你就可以用服务器返回的数据做任何你做的了,你有两个方法去访问这些数据:
httpRequest.responseText-服务器以文本字符的形式返回

httpRequest.responseXML-以XMLDocument对象方式返回,之后就可以使用Javascript来处理。

注意上面这一步只在你发起异步请求时有效(既 open() 的第三个参数未特别指定或设为 true)。如果你你发起的是同步请求则不必使用函数,但是非常不推荐这样子做,它的用户体验很糟糕。

例子:

<button id="ajaxButton" type="button">Make a request</button>

<script>
(function() {
  var httpRequest;
  document.getElementById("ajaxButton").addEventListener('click', makeRequest);

  function makeRequest() {
    httpRequest = new XMLHttpRequest();

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', 'test.html');
    httpRequest.send();
  }

  function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('There was a problem with the request.');
      }
    }
  }
})();
</script>

 

posted @ 2018-07-09 14:37  伊优  阅读(180)  评论(0编辑  收藏  举报