05、JSON与AJAX基础

Ajax

什么是Ajax？([ˈeɪdʒæks])

Ajax的全称是 Asynchronous JavaScript and XML（即异步的JavaScript和XML），它并不是一种新的编程语言，而是几种原有技术的结合体。

Ajax有什么用？

Ajax是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。

Ajax的优点

1、通过异步模式，提升了用户体验。

2、优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。

3、Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

Ajax的缺点

1、不支持浏览器back按钮。

2、安全问题Ajax暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

XMLHttpRequest对象

什么是XMLHttpRequest？

是一种支持异步请求的技术，它是Ajax的核心。

XMLHttpRequest的作用

1、可以向服务器提出请求并处理响应，而不阻塞用户。

2、可以在页面加载以后进行页面的局部更新。

如何使用Ajax？

要完整实现一个Ajax异步调用和局部刷新，通常需要以下几个步骤：

1、@R_502_5275@HttpRequest对象，也就是创建一个异步调用对象

2、创建一个新的HTTP请求，并指定该HTTP请求的方法、URL

3、设置响应HTTP请求状态变化的函数

4、发送HTTP请求

5、获取异步调用返回的数据

6、使用Javascript和DOM 实现局部刷新

如：

1、@R_502_5275@HttpRequest对象

var xmlhttp;
if (window.XMLHttpRequest) {
//主流浏览器、IE7+
xmlhttp = new XMLHttpRequest;
} else {
//IE6/IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//console.log(xmlhttp);

2、创建一个新的HTTP请求

xmlhttp.open( "post" , "./server.PHP" , true );

open(method,url,async) //创建HTTP请求，规定请求的类型、URL以及是否为异步处理请求

method：请求类型，GET或POST

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

url：文件在服务器上的位置

//url是open()方法的一个必选参数，用来设置服务器上文件的地址，该文件可以是任何类型的文件，如.txt、.xml等，或者服务器脚本文件：.asp、.PHP（在传回响应之前，能够在服务器上执行任务）等等。

async：true（异步）或false（同步）

//同步：提交请求  ->  等待服务器处理  ->  处理完毕返回  （整个期间浏览器不能干任何事）

//异步：请求通过时间触发  ->  服务器处理（这时浏览器可以做做任何事情） ->  处理完毕

注：open方法不会向服务器发送真正请求，它相当于初始化请求并准备发送，只能向同一个域中使用相同协议和端口的URL发送请求，否则会因为安全原因报错。

3、设置响应 HTTP请求状态变化的函数

//onreadystatechange 在 readystatechange 属性发生改变时触发
xmlhttp.onreadystatechange = function(){
//当readyState等于4，表示异步调用成功。
// 0，还用send方法（即没初始化）
// 1，已经用了send方法，正在发生请求
// 2、send方法已经执行完成
// 3、正在 解析响应的内容
// 4、解析响应内容 完成，可以在客户端调用
if(xmlhttp.readyState === 4){

//status >= 200 表示异步调用成功
// 100、客户端需要继续发送请求
// 404、表示页面找不到
// ===304、表示近期请求成功过，而且请求内容没有发生改变，还在浏览器缓存中，可以直接使用
if( (xmlhttp.status >=200 && xmlhttp.status <300) || xmlhttp.status === 304){

//异步调用成功后，在这里可以调用那个.PHP文件的内容

//这里填写第5步的代码（获取异步调用返回的数据）

}
}
}

4、发送HTTP请求

send(null);

send(string) //将请求发送到服务器

参数说明：string仅用于post请求

注：仅在post请求时可以传入参数，不需要则发送null，在调用send方法之后，请求被发往服务器

//在get情况下传递参数，可以在open创建请求时，添加到URL地址栏后面（如：./server.PHP?username=zhangsan&password=123）

//在post情况下传递参数，在send发送请求时，xmlhttp.send( { username:"zhangsan" , password:"123″ } );

在post情况下传递参数，必须要设置HTTP头部信息

setRequest(header , value); //设置HTTP头部信息，需要两个参数

xmlhttp.setRequest("Content-type" , "application/x-www-form-urlencoded"); //一般我们可以直接写死

5、获取异步调用返回的数据

console.log(xmlhttp.responseText);     //在控制台打印出返回的数据（字符串的形式）

//在收到响应后相应数据会填充到xmlhttp对象的属性，有四个相关属性会被填充：

responseText：从服务器进程返回数据的字符串形式（比较常用）

 responseXML：从服务器进程返回的DOM兼容的文档数据对象

      status：从服务器返回的数字代码，如404(未找到)和200(已就绪)

 status Text：伴随状态吗的字符串信息

6、使用Javascript和DOM 实现局部刷新

var data = JSON.parse(xmlhttp.reponseText);     //第五步代码

xuanren();      //第六步代码
 

function xuanran(){         //这个函数可以放到最外层

$('p').text(data.xx);     //将p标签的内容换成data的xx属性

}

JSON对象的两个方法：

parse()

语法：JSON.parse()

功能：用于将JSON字符串转化成对象

stringify()

语法：JSON.stringify()

功能：用于将一个值转为字符串，该字符串应该符合JSON格式，并且可以被JSON.parse()方法还原

注：JavaScript原生的eval()类似于JSON.parse()方法，可以将json字符串转换为json对象，但是eval()可以执行不符合JSON格式的代码，有可能会包含恶意代码，所以尽量少用

JSON

什么是JSON？

JSON(javascript object natation)，全称是JavaScript对象表示法，它是一种数据交换的文本格式，而不是一种编程语言，用于读取结构化数据（2001年Douglas Crockford提出，目的是取代繁琐笨重的XML格式）

JSON语法规则

JSON的语法可以表示以下三种类型的值：

1、简单值：

简单值使用与JavaScript相同的语法，可以在JSON中表示字符串、数值、布尔值和null

字符串必须使用双引号表示，不能使用单引号，数值必须以十进制表示，且不能使用NaN和Infinity

注：JSON不支持JavaScript中的特殊值undefined

2、对象：

对象作为一种复杂数据类型，表示的是一组有序的键值对，而每个键值对中的值可以是简单值，也可以是复杂数据类型的值

JSON中对象的键名必须放在双引号里面，因为JSON不是JavaScript语句，所以没有末尾的分号

注：同一个对象中不能出现两个同名属性

3、数组：

数组也是一种复杂数据类型，表示一组有序的值的列表，可以通过数值索引来访问其中的值

注：数组或对象最后一个成员的后面，不能加逗号

jQuery AJAX 方法

$.ajax({
url: "", //请求地址
type: "", //请求方式
async: true, //异步或同步
dataType: "json", //数据格式
success: function(huidiao) { //请求成功的回调（huidiao表示从服务器返回来的数据）
xuanran(huidiao); //渲染数据
}
})

function xuanran(huidiao) { //这个函数可以写到最外层
//$.each()可以用来遍历对象
$.each(huidiao, function(index, obj) { //index表示huidiao里面的每个键，obj表示huidiao里面的每个值
console.log(index + "：" + obj); //打印出每个键值对
})
}

//JavaScript原生方法也可以进行$.ajax()的封装，如：

var $ = {
ajax: function(options) {
//…
}
}

$.ajax()

$.get()

$.post()

$.getJson()