第六天 JSON和AJAX基础教程

JSON : JavaScript Object Notation (JavaScript 对象表示法)。
JSON用来存储和交换文本信息，它比xml更加简洁高效。

JSON语法

[
    {
        "name":"风沐流萤",
        "age":18,
        "sex":"男"
    },{
        "name":"你",
        "age":10,
        "sex":"男"
    }
]

数据写成"名称":值
数据由逗号分隔
大括号保存对象
中括号保存数组

JSON解析

JSON.stringify() 方法将 JavaScript 对象转换为字符串。
JSON.parse() 方法将字符串转换为 JavaScript 对象。

function person(){
    this.name="张三";
    this.sex="女";
}
var jon = JSON.stringify(new person());
console.log(jon);//输出"{"name":"张三","sex":"女"}"
var zs = JSON.parse(jon);
console.log(zs.name);//输出"张三"

---

AJAX : Asynchronous JavaScript and XML（异步的JavaScript和XML）。
AJAX主要用于动态更新网页上的部分内容。

三步创建AJAX

第一步 创建XMLHttpRequest对象

var xmlhttp;
if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
    //IE7+, Firefox, Chrome, Opera, Safari等浏览器执行这个
}else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    //为了兼容IE6, IE5浏览器
}

第二步 添加onreadystatechange事件

readyState存有XMLHttpRequest的状态。从0到4发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
每当readyState改变都会触发onreadystatechange事件。
status是Http状态码
200: 请求成功
404: 页面未找到

xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
    //确保请求成功
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        //xmlhttp.responseText是得到的字符串数据
    }
}

第三步 发送请求

xmlhttp.open("GET","myjson.json",true);//这里请求的是一个json文件的数据
xmlhttp.send();

GET还是POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用POST请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST没有数据量限制）
发送包含未知字符的用户输入时，POST比GET更稳定也更可靠。