Ajax-简单总结

最新推荐文章于 2024-08-27 10:00:37 发布

AGNISLIN

最新推荐文章于 2024-08-27 10:00:37 发布

阅读量171

点赞数

分类专栏： Web 文章标签： Ajax

本文链接：https://blog.csdn.net/qq_34011134/article/details/83831312

版权

Web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Ajax

一、引言

异步JavaScript与XML(AJAX)是一个专用术语，用于实现在客户端脚本与服务器之间的数据交互过程。
这一技术的优点在于，它向开发者提供了一种从Web服务器检索数据而不必把用户当前正在观察的页面回馈给服务器。与现代浏览器的通过存取浏览器DOM结构的编程代码(JavaScript)动态地改变被显示内容的支持相配合，AJAX让开发者在浏览器端更新被显示的HTML内容而不必刷新页面。换句话说，AJAX可以使基于浏览器的应用程序更具交互性而且更类似传统型桌面应用程序。
　　AJAX可以用于任何客户端脚本语言中，这包括JavaScript，Jscript和VBScript。AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息。一个经由XMLHttpRequest对象发送的HTTP请求并不要求页面中拥有或回寄一个＜form＞元素。AJAX中的"A"代表了"异步"，这意味着XMLHttpRequest对象的send()方法可以立即返回，从而让Web页面上的其它TML/JavaScript继续其浏览器端处理而由服务器处理HTTP请求并发送响应。尽管缺省情况下请求是异步进行的，但是，你可以选择发送同步请求，这将会暂停其它Web页面的处理，直到该页面接收到服务器的响应为止。

二、 XMLHttpRequest对象的属性和事件

XMLHttpRequest对象暴露各种属性、方法和事件以便于脚本处理和控制HTTP请求与响应:

属性

readyState 一个HTTP请求发送到服务器时经历的状态
　　0 UNSENT 代理被创建，但尚未调用 open() 方法。
　　1 OPENED open() 方法已经被调用。
　　2 HEADERS_RECEIVED send() 方法已经被调用，并且头部和状态已经可获得。
　　3 LOADING 下载中； responseText 属性已经包含部分数据。
　　4 DONE 下载操作已完成。
* tip
IE中的名称:
　　READYSTATE_UNINITIALIZED, READYSTATE_LOADING,
　　READYSTATE_LOADED, READYSTATE_INTERACTIVE, READYSTATE_COMPLETE
```
var xhr = new XMLHttpRequest();
console.log(‘UNSENT’, xhr.readyState); // readyState 为 0

           xhr.open('GET', '/api', true);
           console.log('OPENED', xhr.readyState); // readyState 为 1

           xhr.onprogress = function () {
             console.log('LOADING', xhr.readyState); // readyState 为 3
           };

           xhr.onload = function () {
             console.log('DONE', xhr.readyState); // readyState 为 4
           };
           xhr.send(null);
       ```

onreadystatechange 当dareadyState 属性发生变化时调用的处理函数

   var xhr= new XMLHttpRequest(),
   method = "GET",
   url = "https://developer.mozilla.org/";

   xhr.open(method, url, true);
   xhr.onreadystatechange = function () {
       if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
           console.log(xhr.responseText)
       }
   }
   xhr.send();

 Value of responseType       Data type of response property
         ""	                        DOMString (默认) 一个UTF-16字符串。由于JavaScript已经使用了这样的字符串，所以DOMString直接映射到一个String。
         "arraybuffer"	              ArrayBuffer 表示通用的、固定长度的原始二进制数据缓冲区
         "blob"                     	Blob
         "document"                  Document
         "json"	                    JavaScript object, parsed from a JSON string returned by the server
         "text"                     	DOMString

responseText 返回一个DOMString，包含对请求的响应，如果请求未成功或尚未发送，则返回null。

responseType 定义响应类型的枚举值

responseURL 返回响应的序列化URL，如果URL为空，则返回空字符串。

status 返回 unsigned short 即无符号短整型请求响应状态。在请求完成前|出错，status的值为0
value: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

statusText 返回一个DOMString}，其中包含HTTP服务器返回的响应状态。

timeout unsigned long 即无符号长整型，表示该请求的最大请求时间（毫秒），超过该时间请求会自动结束。

方法

abort() 如果请求已经被发送,则立刻中止请求.
getAllResponseHeaders() 以字符串的形式返回所有用CRLF分隔的响应头，如果没有收到响应，则返回null。
getResponseHeader() 返回包含指定响应头的字符串，如果响应尚未收到或响应中不存在该报头，则返回null。
open() 初始化一个请求。该方法只能JavaScript代码中使用，若要在native code中初始化请求，请使用openRequest()。
overrideMimeType() 重写由服务器返回的MIME type。
send() 发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。
接受一个可选的参数，其作为请求主体,如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。
如果没有使用setRequestHeader（）方法设置 Accept 头部信息，则会发送带有/的Accept 头部。

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/send

XMLHttpRequest.setRequestHeader() 设置HTTP请求头的值。您必须在open()之后、send()之前调用setRequestHeader()这个方法。

  var xhr = new XMLHttpRequest();
  xhr.open("POST", '/server', true);

  //发送合适的请求头信息
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  xhr.onreadystatechange = function() {//Call a function when the state changes.
    if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
        // 请求结束后,在此处写处理代码
    }
  }
  xhr.send("foo=bar&lorem=ipsum");
  // xhr.send('string');
  // xhr.send(new Blob());
  // xhr.send(new Int8Array());
  // xhr.send({ form: 'data' });
  // xhr.send(document);

Content-Type
application/x-www-form-urlencoded：数据被编码为名称/值对。这是标准的编码格式。
multipart/form-data：数据被编码为一条消息，页上的每个控件对应消息中的一个部分。
text/plain：数据以纯文本形式(text/json/xml/html)进行编码，其中不含任何控件或格式字符。
form 的 enctype 属性为编码方式，常用有两种：application/x-www-form-urlencoded和multipart/form-data，默认为application/x-www-form-urlencoded。

当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2…），然后把这个字串追加到url后面，用?分割，加载这个新的url。

当action为post时候，浏览器把form数据封装到http body中，然后发送到server。
如果没有type=file的控件，用默认的application/x-www-form-urlencoded就可以了。
但是如果有type=file的话，就要用到multipart/form-data了。

当action为post且Content-Type类型是multipart/form-data，浏览器会把整个表单以控件为单位分割，
并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary)。