如何详细解析JavaScript中实现异步的Ajax操作及其原理？

本文共计2504个文字，预计阅读时间需要11分钟。

目录一级目录二级目录三级目录HTTP协议请求消息结构请求方法响应头信息响应状态码AJAXAJAX=Asynchronous JavaScript and XML（异步的JavaScript和XML）XMLHttpRequest对象

目录

• 一级目录
• 二级目录
• 三级目录
• HTTP协议
• 请求消息结构
• 请求方法
• 响应头信息
• 响应状态码
• AJAX
• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
• XMLHttpRequest对象
• XMLHttpRequest请求
• XMLHttpRequest响应
• XMLHttpRequest响应状态
• XML
• XML 语法规则
• XML 解析
• JSON
• JSON 语法规则
• JSON文件读取
• JSON解析
• JSONP
• 服务端JSONP格式数据
• 客户端实现 callbackFunction 函数
• jQuery 使用 JSONP
• 总结

一级目录

二级目录

三级目录

1.掌握HTTP协议和规则

2.掌握HTTP请求和响应的规则重点

3.了解HTTP响应头信息

4.了解HTTP状态码

5.掌握AJAX开发中使用的全过程重点

6.掌握JavaScript JSON的数据结构和使用方法重点

7.掌握JavaScript XML数据结构和使用方法

8.掌握AJAX获取JSON格式数据的方法

9.掌握JSON格式转换的方法

HTTP协议

HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。。

HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）

请求消息结构

HTTP是基于客户端/服务端（C/S）的架构模型，通过一个可靠的链接来交换信息，是一个无状态的请求/响应协议。

客户端发送一个HTTP请求到服务器的请求消息包括以下格式：

• 请求行（request line）
• 请求头部（header）
• 空行
• 请求数据

下面给出了请求报文的一般格式:

GET / HTTP/1.1 Host: www.csdn.net Connection: keep-alive Cache-Control: max-age=0 Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Referer: www.csdn.net/ Accept-Encoding: gzip, deflate, sdch, br Accept-Language: zh-CN,zh;q=0.8 Cookie: uuid_tt_dd=-6852503192799459486_20161230; _ga=GA1.2.851452765.1483110024; UE="starzhangkiss@qq.com"; __guid=253029775.837108528115350700.1516453692677.6106

请求方法

方法描述GET请求指定的页面信息，并返回实体主体。数据被包含在URL参数中POST向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。HEAD类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头PUT从客户端向服务器传送的数据取代指定的文档的内容。DELETE请求服务器删除指定的页面。CONNECTHTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。OPTIONS允许客户端查看服务器的性能。TRACE回显服务器收到的请求，主要用于测试或诊断。

响应头信息

HTTP/1.1 200 OK

Server: Tengine

Content-Type: text/html

Content-Length: 15154

Connection: keep-alive

Date: Fri, 27 Apr 2018 02:49:12 GMT

X-Powered-By: HHVM/3.11.1

Content-Encoding: gzip

Vary: Accept-Encoding

Via: cache40.l2et2-2[0,200-0,H], cache3.l2et2-2[1,0], cache1.cn548[0,200-0,H], cache4.cn548[1,0] Age: 35292

X-Cache: HIT TCP_HIT dirn:7:245100152 mlen:-1

X-Swift-SaveTime: Fri, 27 Apr 2018 12:24:58 GMT

X-Swift-CacheTime: 86400 Timing-Allow-Origin: *

EagleId: dbee144415248326444025049e

响应字段类型

应答头说明Allow服务器支持的请求方法（如GET、POST等）。Content-Encoding文档的编码（Encode）方法。只有在解码之后才可以得到Content-Type头指定的内容类型。Content-Length内容长度。只有当浏览器使用持久HTTP连接时才需要这个数据。Content-Type文档MIME类型Date当前的GMT时间。你可以用setDateHeader来设置这个头以避免转换时间格式的麻烦。Expires应该在什么时候认为文档已经过期，从而不再缓存它？Last-Modified文档的最后改动时间。Location表示客户应当到哪里去提取文档。Refresh表示浏览器应该在多少时间之后刷新文档，以秒计。Server服务器名字。由Web服务器自己设置。Set-Cookie设置和页面关联的Cookie。WWW-Authenticate客户应该在Authorization头中提供什么类型的授权信息？

响应状态码

分类分类描述1信息，服务器收到请求，需要请求者继续执行操作（收到信件，还没看）2成功，操作被成功接收并处理（收到，并且看过了）3重定向，需要进一步的操作以完成请求（转达信息给第三者）4客户端错误，请求包含语法错误或无法完成请求（发不出去）5服务器错误，服务器在处理请求的过程中发生了错误（对方出错）

详细状态码列表

状态码中文描述200请求成功。一般用于GET与POST请求201已创建。成功请求并创建了新的资源202已接受。已经接受请求，但未处理完成204无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档301永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替302临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI400客户端请求的语法错误，服务器无法理解401请求要求用户的身份认证403服务器理解请求客户端的请求，但是拒绝执行此请求404无法找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面408服务器等待客户端发送的请求时间过长，超时411服务器无法处理客户端发送的不带Content-Length的请求信息415服务器无法处理请求附带的媒体格式500服务器内部错误，无法完成请求

AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

• AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
• AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

XMLHttpRequest对象

XMLHttpRequest 是AJAX 的基础。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

XMLHttpRequest请求

如需将请求发送到服务器，我们使用XMLHttpRequest对象的open()和send()方法：

xmlwww.baidu.com/try/ajax/jsonp.php?jsonp=callbackFunction。假设客户期望返回JSON数据：["customername1","customername2"]。真正返回到客户端的数据显示为:callbackFunction(["customername1","customername2"])。

服务端文件jsonp.php代码为：

header('Content-type: application/json'); //获取回调函数名 $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']); //json数据 $json_data = '["customername1","customername2"]'; //输出jsonp格式的数据 echo $jsoncallback . "(" . $json_data . ")";

客户端实现 callbackFunction 函数

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JSONP 实例</title> </head> <body> <div id="divCustomers"></div> <script type="text/javascript"> function callbackFunction(result, methodName) { var html = '<ul>'; for(var i = 0; i < result.length; i++) { html += '<li>' + result[i] + '</li>'; } html += '</ul>'; document.getElementById('divCustomers').innerHTML = html; } </script> <script type="text/javascript" src="www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script> </body> </html>

jQuery 使用 JSONP

以上代码可以使用 jQuery 代码实例：

<html> <head> <meta charset="utf-8"> <title>JSONP 实例</title> <script src="cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script> </head> <body> <div id="divCustomers"></div> </body> <script> $.getJSON("www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) { var html = '<ul>'; for(var i = 0; i < data.length; i++) { html += '<li>' + data[i] + '</li>'; } html += '</ul>'; $('#divCustomers').html(html); }); </script> </html>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注自由互联的更多内容!