概念
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的表述方式,而它到底是什么要看你把它当作什么来用。