开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript 异步ajax -> 正文阅读

[JavaScript知识库]JavaScript 异步ajax

一级目录

二级目录

三级目录

掌握HTTP协议和规则
掌握HTTP请求和响应的规则 重点
了解HTTP响应头信息
了解HTTP状态码
掌握AJAX开发中使用的全过程 重点
掌握JavaScript JSON的数据结构和使用方法 重点
掌握JavaScript XML数据结构和使用方法
掌握AJAX获取JSON格式数据的方法
掌握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>