一级目录
二级目录
三级目录
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,*
if(request.readyState == 4 && request.status == 200) {
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>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程网的更多内容!
