Ajax、json，原生JS和JQ使用Ajax

概念

Ajax：异步的JavaScript和XML ，用于在Web页面中实现异步数据交互。

原理

在用户和服务器之间加了一个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像—些数据验证和数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由 Ajax引擎代为向服务器提交请求。

优点

可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量

避免用户不断刷新或者跳转页面，提高用户体验

缺点

对搜索引擎不友好

要实现ajax下的前后退功能成本较大

可能造成请求数的增加

跨域问题限制

属性

Ajax核心就是XMLHttpRequest对象,它的属性有：

responseText、responseXML、status、statusText、readyState…

方法

XMLHttpRequest对象方法：

open()、setRequestHeader()、send()、getRequestHeader()…

原生JS实现Ajax

readyState属性：表示请求/响应过程的当前活动阶段，取值为0-4，当值为4时表示已经接收到全部响应数据

onreadystatechange事件：readyState属性值改变时触发

status属性：HTTP状态码，取值为1XX，2XX，3XX，4XX，5XX

responseText属性 ：响应返回的文本

open()方法：启用一个请求以备发送

参数一：请求类型，GET或POST

参数二：请求的URL地址

参数三：是否异步发送的布尔值。true为异步，false为同步

send()方法：请求发送， 接收一个参数为请求主体发送的数据， 不发送数据则传入null

var Ajax = {
get: function(url,fn){
var xhr = new XMLHttpRequest();//创建XMLHttpRequest对象（IE7+、其他主流浏览器）
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
alert(xhr.responseText);//请求发送成功
} else {
//请求发生失败
}
}
}
xhr.open('GET',url,true);
xhr.send(null);
},
post: function(url,data,fn){
var xhr = new XMLHttpRequest();
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 设置请求头信息：发送信息至服务器时内容编码类型
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
alert(xhr.responseText);//请求发送成功
} else {
//请求发生失败
}
}
}
xhr.open('POST',url,true);
xhr.send(data);
}
}

可以看出，post请求多传入了一个data数据参数，它作为请求的主体提交，并设置了一个请求头。

get与post的区别

get是从服务器上获取数据，post是向服务器传送数据。

传递参数的方式不同：

get：把参数数据队列加到提交表单的action属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。

post：通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

服务器端用不同的方式获取提交的数据。

get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。

get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

jQuery Ajax

$.load()

适合静态页面.

$(selector).load(URL,data,callback);

必需的 URL 参数

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

若传入了data参数（对象）默认为post方法发送

可选的 callback 参数是 load() 方法完成后所执行的回调函数名称。

回调函数可设置不同的参数

responseTxt - 包含调用成功时的结果内容

statusTXT - 包含调用的状态

xhr - 包含XMLHttpRequest对象

实例

$('button').click(function(){
$('#div1').load('demo_test.txt',function(responseTxt,statusTxt,xhr){
if(statusTxt == 'success'){}
if(statusTxt == 'error'){}
})
})

$.get()

用get方式发送

参数与load()相同，但是和post()方法 都多了一个可选参数type——返回的数据类型 ，一般会自动识别

$.post()

用post方式发送

$.ajax()

直接看实例：

$.ajax({
type: "GET",
url: "Services/EFService.svc/Members",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
// Play with returned data in JSON format
},
error: function (msg) {
alert(msg);
}
});

注： 若是搜索、查询等操作的请求，需要将要查询的字符加到URL值后面

json

概念：

JSON是一种轻量级的数据交换格式，并不从属与JS，也不是只有JS才使用JSON

优点

轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）。

与XML比较：

JSON的长度比起来很短小

JSON读写速度更快

JSON可以用JS内建的发布方法直接进行解析，可与JS对象互转

JSON具有三种类型的值

简单值：JS中的4个基本数据类型，除了undefined

对象： JSON的对象属性必须加引号

数组

解析与序列化：

可以把JSON数据结构解析为有用的JS对象

JSON对象有两个方法

stringify() 把JS对象序列化JSON字符串 注意， 是字符串， 保存在变量中

parse() 把JSON字符串解析为原生JS值

json对象与JS对象的区别

var jsObject={
name:"Nicholas",
age:29
}
var jsonObject={
"name":"Nicholas",
"age":29
}

上面的两个JS对象分别是什么？在JS代码中第一个毫无疑问是JS对象，第二个所属就很模糊了，可以说是JS对象，也可以是JSON对象（JSON中没有对象的说法，为什么要称为JSON对象，jsonObject是JS中的JSON（格式的）对象，这么说没错，但有时会造成混乱）。第二个对象比较特殊，因为它即符合JS对象字面量的形式也符合JSON的表述方式，而它到底是什么要看你把它当作什么来用。