JavaScript异步Ajax与json总结
Ajax简介
Ajax：（Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）） [eɪˈsɪŋkrənəs]
1、 什么是Ajax？
Ajax不是某种编程语言
Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
传统的网页（不使用Ajax）如果更新内容，必须重新加载整个页面
有很多使用Ajax的应用程序案例：新浪微博、Google地图等等
2、 同步与异步
同步：就是指一个京城在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个
进程将会一直等待下去，直到收到返回消息才继续下去
异步：是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态，当有消息
返回时系统会通知进程进行处理，这样可以提高执行的效率
异步实现：
1、 运用HTML与CSS来实现，表达信息
2、 运用XMLHttpRequest和web服务器进行数据的异步交换
3、 运用JavaScript操作DOM，实现动态局部刷新
3、Ajax–创建XMLHttpRequest对象
什么是XMLHttpRequest对象？
XMLHttpRequest对象用于在后台与服务器交换数据（具体可见w3c）
创建XMLHttpRequest对象
所有现代浏览器(IE7、Firefox、Chrome、Safari、以及Opera)均内建XMLHttpRequest对象
创建XMLHttpRequest对象语法：
var xmlhttp;
if(window. XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}else{
// code for IE6, IE5
Xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
4、Ajax – 向服务器发送请求
向服务器发送请求，我们使用XMLHttpRequest对象的open()和send()方法：
open(method,url,asyns)规定请求的类型，URL以及是否异步处理请求
参数说明：
Method:请求的类型，GET或POST
url：文件在服务器上的位置
async:true(异步)或false(同步)Asynchronous
send(data)：将请求发送到服务器
参数说明：
data仅用于POST请求
一个简单的GET请求：
xmlhttp.open("GET","/Ajax/getData",true);
xmlhttp.send();
一个简单的POST请求：
xmlhttp.open("POST","/Ajax/getData",true);
xmlhttp.send();
如果需要像HTML那样POST数据，请使用setRequestHeader()来添加HTTP头，然后再send()方法规定要
发送的数据
xmlhttp.open("POST","/Ajax/getData",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(data);
setRequestHeader语法：
xmlhttp.setRequestHeader(header,value);
参数说明：
header：规定头的名称
value：规定头的值
5、Ajax服务器响应
使用XMLHttpRequest对象的responseText或responseXML属性获取来自服务器的响应
responseText：获得字符串形式的响应数据
responseXML：获得XML形式的响应数据
6、Ajax – onreadystatechange事件
在XMLHttpRequest对象中，readyState属性存有XMLHttpRequest的状态信息，每当
readyState改变时，就会触发onreadystatechange事件
XMLHttpRequest对象的三个重要属性：
onreadystatechange：存储函数(或函数名),每当readyState属性改变时，就会调用该函数
readyState：存有XMLHtpRequest的状态，从0到4发生变化
0：请求为初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪
status：200:"OK"，404:未找到页面
在readyState等于4且status为200时，表示响应已就绪：
xmlhttp.onreadystatechange = fuction(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
consol.log(xmlhttp.responseText);
}
}
例：文本框：姓名（id="name"） 性别（id="sex"） 地址（id="address"）
//XMLHttpRequest 从服务器上获取数据
function getData() {
var xmlhttp = null;
//处理兼容性问题
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.open(“GET”, “/Ajax/getData”);
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var obj = JSON.parse(xmlhttp.responseText); //将JSON字符串解析为原生JS值
document.getElementById(“name”).value = obj.name;
document.getElementById(“sex”).value = obj.sex;
document.getElementById(“address”).value = obj.address;
}
};
};
//XMLHttpRequest 向服务器提交数据
function postData() {
var name = document.getElementById("name").value;
var sex = document.getElementById("sex").value;
var address = document.getElementById("address").value;
if (name == "" || sex == 0 || address == "") {
alert("数据不完整！");
return;
}
var data = "name=" + name + "&sex=" + sex + "&address=" + address;
var xmlhttp = null;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST", "/Ajax/postData");
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//指定响应头
xmlhttp.send(data); //send(数据)，这种形式只用于post提交数据
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log(xmlhttp.responseText);
}
};
};
//向服务器提交数据，使用 FormData() 处理数据，不需要指定响应头
function postData1() {
var name = document.getElementById("name").value;
var sex = document.getElementById("sex").value;
var address = document.getElementById("address").value;
if (name == "" || sex == 0 || address == "") {
alert("数据不完整！");
return;
}
var data = new FormData(); //FormData 接口提供了一种表单数据的键值对的构造方式
data.append("name", name);
data.append("sex", sex);
data.append("address", address);
var xmlhttp = null;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST", "/Ajax/postData");
xmlhttp.send(data); //send(数据)，这种形式只能用post提交数据
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log(xmlhttp.responseText);
}
};
};
JSON简介
JSON：JavaScript对下那个表示法（JavaScript Object Notation）
JSON是存储和交换文本信息的语法：
1、 JSON是轻量级的文本数据交换格式
2、 JSON独立于语言和平台
3、 JSON具有自我描述性，更易理解
类似于XML，比XML更小、更快、更易理解(XML:指可扩展标记语言，XML被设计用来传输和存储数据)
1、 JSON语法
JSON语法是JavaScript对象表示语法的子集
-
数据在名称/值对中（数据在键值对中）
-
数据由逗号隔开
-
花括号保存对象（{}）
-
方括号保存数据（[]）
JSON的值可以是：
数字（整数或浮点数）
字符串（在双引号中）
布尔值（true或false）
数据（在方括号中）
对象（在花括号中）
null
2、 JSON对象与JS对象有2个地方不一样： -
没有声明变量（JSON中没有声明变量的概念）
-
末尾没有分号（因为这不是JavaScript，所以不需要分号）
例：JS对象
var person = {
name: “张三”,
sex: “男”,
address: “广州”
};
JSON对象
{
name: “张三”,
sex: “男”,
address: “广州”
}
3、 JSON 数组（在方括号中书写，数组可包含多个对象）
例：var arr = [12, “hello”, true]; //JS中的数组
[12, “hello”, true] //JSON中的数组
//在JSON中，可以采用同样的语法表示一个数组，同样注意：JSON数组中没有变量和分号把数组和对象结合起来，可以构成更加复杂的数据集合，例如： JSON数组和对象结合的数据集合 { "employees": [ { "firstName": "Bill", "lastName": "Gates" }, { "firstName": "George", "lastName": "Bush" }, { "firstName": "Thomas", "lastName": "Carter" } ] }; JS数组和对象结合的数据集合 var obj = { "employees": [ { "firstName": "Bill", "lastName": "Gates" }, { "firstName": "George", "lastName": "Bush" }, { "firstName": "Thomas", "lastName": "Carter" } ] };
4、解析与序列化
JSON对象有两个方法：
stringify()：将对象序列化为JSON字符串
例：var str = JSN.stringify(obj);
console.log(typeof str); //string
console.log(str); //输出结果如下，字符串
//’{ “employees”: [{ “firstName”: “Bill”, “lastName”: “Gates” }, { “firstName”:
“George”,“lastName”:“Bush”},{ “firstName”: “Thomas”, “lastName”: “Carter” }] }’;
parse()：将JSON字符串解析为原生JS值
例：var obj1 = JSON.parse(str);
console.log(typeof obj1); //object
console.log(obj1); //输出结果如下，对象
//{
“employees”: [
{ “firstName”: “Bill”, “lastName”: “Gates” },
{ “firstName”: “George”, “lastName”: “Bush” },
{ “firstName”: “Thomas”, “lastName”: “Carter” }
]
}