JavaScript的异步ajax详解
目录
- 一级目录
- 二级目录
- 三级目录
- HTTP协议
- 请求消息结构
- 请求方法
- 响应头信息
- 响应状态码
- AJAX
- AJAX=AsynchronousJavaScriptandXML(异步的JavaScript【JSON】和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: https://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 | 请求服务器删除指定的页面。 |
CONNECT | HTTP/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类似。但资源只是临时被移动。客户端应继续使用原有URI |
400 | 客户端请求的语法错误,服务器无法理解 |
401 | 请求要求用户的身份认证 |
403 | 服务器理解请求客户端的请求,但是拒绝执行此请求 |
404 | 无法找到资源(网页)。通过此代码,网站设计人员可设置"您所请求的资源无法找到"的个性页面 |
408 | 服务器等待客户端发送的请求时间过长,超时 |
411 | 服务器无法处理客户端发送的不带Content-Length的请求信息 |
415 | 服务器无法处理请求附带的媒体格式 |
500 | 服务器内部错误,无法完成请求 |
AJAX
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript【JSON】 和 XML)。
- AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
- AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
XMLHttpRequest对象
XMLHttpRequest 是AJAX 的基础。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新
XMLHttpRequest请求
如需将请求发送到服务器,我们使用 XMLHttpRequest
对象的 open()
和 send()
方法:
xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();
方法说明
方法 | 描述 |
---|---|
open(method,url,async) | method:请求的类型;GET 或 POSTurl:文件在服务器上的位置async:true(异步)或 false(同步) |
setRequestHeader(header,value) | 向请求添加 HTTP 头。header: 规定头的名称value: 规定头的值 |
send(string) | 将请求发送到服务器。string:仅用于 POST 请求 |
XMLHttpRequest响应
获得来自服务器的响应,使用 XMLHttpRequest
对象的responseText
或 responseXML
属性。
属性 | 描述 |
---|---|
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
XMLHttpRequest响应状态
readyState 属性存有 XMLHttpRequest 的状态信息。
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState | 0: 请求(未初始化)还没有调用send()方法 1: 请求连接已建立(载入)已调用send()方法,正在发送请求 2: 请求已接收(载入完成)send()方法执行完成,刚刚接收到全部响应内容 3: 请求处理中(交互)正在解析响应内容 4: 请求已完成(完成)响应内容解析完成 |
status|statusText | 200: “OK” 400无法找到资源 404:未找到页面 500:服务器内部错误 |
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200){ getResponseHeader("headerLabel"); document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
案例01
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> function load(file, async, callback) { var request = null; if(window.XMLHttpRequest) { request = new XMLHttpRequest(); } else if(window.ActiveXObject) { request = new window.ActiveXObject(); } else { request("您的浏览器版本过低"); } if(request != null) { //规定请求的类型、URL 以及是否异步处理请求 request.open('GET', file, async); //将请求发送到服务器,参数仅仅用于POST request.send(null); //每当 readyState 属性改变时,调用的函数 request.onreadystatechange = function() { /* * readyState 可能的值 * * 0 - (未初始化)还没有调用send()方法 * 1 - (载入)已调用send()方法,正在发送请求 * 2 - (载入完成)send()方法执行完成,刚刚接收到全部响应内容 * 3 - (交互)正在解析响应内容 * 4 - (完成)响应内容解析完成 */ if(request.readyState == 4 && request.status == 200) { /* * 可能的响应类型 * responseText - 获得字符串形式的响应数据 * responseXML - 获得 XML 形式的响应数据。 */ callback(JSON.parse(request.responseText)); } }; } } load('weather.json', true, function(text) { document.body.innerText = '当前气温:' + text.data.wendu + '°'; }); </script> </html>
weather.json
{ "status": 200, "data": { "wendu": "29", "ganmao": "各项气象条件适宜,发生感冒机率较低。但请避免长期处于空调房间中,以防感冒。", "forecast": [ { "fengxiang": "南风", "fengli": "3-4级", "high": "高温 32℃", "type": "多云", "low": "低温 17℃", "date": "16日星期二" }, { "fengxiang": "南风", "fengli": "微风级", "high": "高温 34℃", "type": "晴", "low": "低温 19℃", "date": "17日星期三" }, { "fengxiang": "南风", "fengli": "微风级", "high": "高温 35℃", "type": "晴", "low": "低温 22℃", "date": "18日星期四" }, { "fengxiang": "南风", "fengli": "微风级", "high": "高温 35℃", "type": "多云", "low": "低温 22℃", "date": "19日星期五" }, { "fengxiang": "南风", "fengli": "3-4级", "high": "高温 34℃", "type": "晴", "low": "低温 21℃", "date": "20日星期六" } ], "yesterday": { "fl": "微风", "fx": "南风", "high": "高温 28℃", "type": "晴", "low": "低温 15℃", "date": "15日星期一" }, "aqi": "72", "city": "北京" }, "message": "OK" }
效果展示
XML
XML 指可扩展标记语言(eXtensible Markup Language)。XML 被设计用来传输和存储数据。
XML 语法规则
- XML 元素名和HTML不一样,没有固定的单词,需要自定义。
- XML 必须包含根元素,它是所有其他元素的父元素,根元素标签名自定义。
- XML 所有的元素都必须有一个关闭标签
- XML 标签必须正确嵌套
- XML 属性值必须加引号
- XML 标签对大小写敏感。标签
<Letter>
与标签<letter>
是不同的
XML 声明文件的可选部分,如果存在需要放在文档的第一行,如下所示:
<?xml version="1.0" encoding="utf-8"?>
如:
<?xml version="1.0" encoding="utf-8"?> <bookstore> <book category="CHILDREN"> <title>Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book> <book category="WEB"> <title>Learning XML</title> <author>Erik T. Ray</author> <year>2003</year> <price>39.95</price> </book> </bookstore>
XML 解析
下面的代码片段把 XML 字符串解析到 XML DOM 对象中
案例02
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> txt = '<bookstore>'+ '<book category="CHILDREN">'+ '<title>Harry Potter</title>'+ '<author>J K. Rowling</author>'+ '<year>2005</year>'+ '<price>29.99</price>'+ '</book>'+ '<book category="WEB">'+ '<title>Learning XML</title>'+ '<author>Erik T. Ray</author>'+ '<year>2003</year>'+ '<price>39.95</price>'+ '</book>'+ '</bookstore>'; if(window.DOMParser) { parser = new DOMParser(); xmlDoc = parser.parseFromString(txt, "text/xml"); } else {// Internet Explorer xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false; xmlDoc.loadXML(txt); } // xmlDoc 等价于 document xmlDoc.querySelectorAll('book').forEach(function(e,i){ document.write(e.innerHTML); console.log(e.children) }) </script> </html>
效果展示
JSON
JSON: JavaScript Object Notation(JavaScript 对象表示法)。JSON 是存储和交换文本信息(传输)的语法。类似 XML。JSON 比 XML 更小、更快,更易解析。
JSON 语法规则
JSON 语法是 JavaScript 对象表示语法的子集。
- 数据在名称/值对中
- 数据由逗号分隔
- 大括号保存对象
- 中括号保存数组
JSON 值
JSON 值可以是:
- 数字(整数或浮点数)
- 字符串(在双引号中)
- 逻辑值(true 或 false)
- 数组(在中括号中)
- 对象(在大括号中)
- Null
如:
var json = { 'array':[1,'你好',true], 'number':123, 'string':'hello', 'boolean':true, 'object':{ 'name':'张三', 'pswd':123456 } }
JSON 文件
- JSON 文件的文件类型是 “.json”
- JSON 文本的 MIME 类型是 “application/json”
JSON 对象
可以使用点号(.)来访问对象的值,也可以使用中括号([])来访问对象的值
案例03:获取
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> var json = { 'array':[1,'你好',true], 'number':123, 'string':'hello', 'boolean':true, 'object':{ 'name':'张三', 'pswd':123456 } } document.write(json.string); document.write(json['number']); </script> </html>
效果展示
案例04:删除对象属性
可以使用 delete 关键字来删除 JSON 对象的属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> var json = { 'array': [1, '你好', true], 'number': 123, 'string': 'hello', 'boolean': true, 'object': { 'name': '张三', 'pswd': 123456 } } delete json.array; delete json['object']; for(i in json) { document.write(json[i]); } </script> </html>
效果展示
JSON文件读取
var request = null; if(window.XMLHttpRequest) { request = new XMLHttpRequest(); } else if(window.ActiveXObject) { request = new window.ActiveXObject(); } else { request("您的浏览器版本过低"); } if(request != null) { request.open(method, file, true); request.send(null); request.onreadystatechange = function() { if(request.readyState == 4 && request.status == 200) { //console.log(request.responseText) callback(JSON.parse(request.responseText)); } }; }
JSON解析
JSON.parse():JSON字符串转JavaScript 对象
JSON.parse(text[, function])
参数说明:
- text:必需,一个有效的 JSON 字符串。
- function(key,value): 可选,一个转换结果的函数,将为对象的每个成员调用此函数。
案例05
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> var json = '{"number":123,"string":"hello","boolean":true}'; var obj = JSON.parse(json,function(key,value){ if (key == "number") { return 789; } return value;//这句不能少,处理不满足if的情况的其他数据 }); document.write(obj.number); document.write(obj['string']); </script> </html>
效果展示
JSONP
Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。
服务端JSONP格式数据
如客户想访问 : http://www.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="http://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="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script> </head> <body> <div id="divCustomers"></div> </body> <script> $.getJSON("http://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>
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!