摘要:
Ajax(Asynchornous JavaScript and XML)
主要API -----XMLHttpRequest
不同浏览器Ajax API不同 (jQuery帮助解决了)
不可跨域访问,但出现了一个技术CORS
一、Key Concepts 关键概念
1.GET和POST
最常用的两种提交到服务器方法(还要其他五种,delete。。。不记得了)
GET:地址栏可以看到传入到服务器参数值键值对。。。。。
POST:有些数据可以抓包看,通常不会缓存在浏览器。。。。。
2.Data Types 数据类型
1)text
传送简单的字符串
2)html
传输html代码块到页面
3)script
添加新的脚本JavaScript到页面
4)json
传输json格式的数据,可以包括数组,字符串,对象
5)jsonp
从另一个域传输json数据
6)xml
使用xml数据传输数据
3.A is for Asyncharonous ——A代表异步
Ajax默认异步处理,所以只能通过异步回调函数来处理响应
var response;
$.get( "foo.php", function( r ) {
response = r;
});
console.log( response ); // undefined
$.get( "foo.php", function( response ) {
console.log( response ); // server response
});
4.Same-Origin Policy and JSONP
一般情况下,Ajax请求只在同一协议,端口,域名下执行请求,jQuery可以解决
注意,IE10以下不支持跨域的AJax请求访问
使用JSONP可以通过js写甲苯实现跨域访问,避免上面的局限
5.Ajax and Firebug (webkit观察)
二、jQuery's Ajax-Related Methods关于jQuery的Ajax方法
所有方法的核心 $.ajax()
1.$.ajax() 详细介绍http://api.jquery.com/jQuery.ajax/
// Using the core $.ajax() method
$.ajax({
// The URL for the request
url: "post.php",
// The data to send (will be converted to a query string)
data: {
id: 123
},
// Whether this is a POST or GET request
type: "GET",
// The type of data we expect back
dataType : "json",
})
// Code to run if the request succeeds (is done);
// The response is passed to the function
.done(function( json ) {
$( "<h1>" ).text( json.title ).appendTo( "body" );
$( "<div class=\"content\">").html( json.html ).appendTo( "body" );
})
// Code to run if the request fails; the raw request and
// status codes are passed to the function
.fail(function( xhr, status, errorThrown ) {
alert( "Sorry, there was a problem!" );
console.log( "Error: " + errorThrown );
console.log( "Status: " + status );
console.dir( xhr );
})
// Code to run regardless of success or failure;
.always(function( xhr, status ) {
alert( "The request is complete!" );
});
在请求的时候,需要告诉请求的数据格式,防止出现响应错误,收不到正确的服务器数据格式,如:需要请求json数据格式,那么头部,需要写上 application/json
2.$.ajax()Options 选项
常用的有下面几个,详细的选项介绍:http://api.jquery.com/jQuery.ajax/
1)async
默认为true,如果想同步执行请求,设置false即可。但是,设置成false后,你的请求直到收到响应后才会去执行其他代码块
2)cache
缓存,是否设置,默认true,对所有的数据类型dataType有效
3)done
如果请求成功,将运行回调函数,该函数将接受响应的数据(json格式转换为js对象),同时,其他数据都是原类型
4)fail
如果出现错误,运行该回调函数
5)always
不管请求失败还是成功,该回调函数都会运行
6)context
回调函数运行的范围
7)data
将要发送到服务器的数据,可以是对象,也可以是查询字符串
8)dataType
期望从服务器返回的数据类型,如果没有明确指定的话,jQuery将根据响应的MIME来确定
9)jsonp
当执行JSONP请求的时候需要发送查询字符串的回到名称,默认就是”callback”
10)timeout
超时,单位毫秒,即等待多长服务器响应时间视为失败
11)traditional
设置为true则将使用jQu1.4参数序列化风格,详细见http://api.jquery.com/jQuery.param/
12)type
请求方式,"POST" 或者"GET",默认为“GET”,其他方式比如"DELETE"也可以,但是可能有些浏览器不支持而已
13)url
请求地址URL,是$.ajax()中必须要配置的选项,其他选项都是可选配置的
3.Convenience Methods 常用简便方法
只需要简单配置一些选项就可以完成异步请求
1)$.get
给提供的URL执行GET请求
2)$.post
给提供的URL执行POST请求
3)$.getScript
给页面添加js脚本
4)$.getJSON
执行GET提交请求,期望返回JSON格式,在不同情况下,该方法将会返回下面这些参数,依次是:
(1)url
请求的URL,必须的
(2)data
(3)success callback
(4)data type
// Using jQuery's Ajax convenience methods
// Get plain text or HTML
$.get( "/users.php", {
userId: 1234
}, function( resp ) {
console.log( resp ); // server response
});
// Add a script to the page, then run a function defined in it
$.getScript( "/static/js/myScript.js", function() {
functionFromMyScript();
});
// Get JSON-formatted data from the server
$.getJSON( "/details.php", function( resp ) {
// Log each key in the response data
$.each( resp, function( key, value ) {
console.log( key + " : " + value );
});
});
4.$.fn.load
.load()方法是jQuery ajax所有方法中唯一一个供选择器调用的方法,去填充选择的元素里面的内容
// Using .load() to populate an element
$( "#newContent" ).load( "/foo.html" );
// Using .load() to populate an element based on a selector
$( "#newContent" ).load( "/foo.html #myDiv h1:first", function( html ) {
alert( "Content updated!" );
});
三、Ajax and Forms
1.Serialization
1).serialize()
.serialize()方法序列化表单的数据为一个查询字符串,必须要有一个name属性,
// Turning form data into a query string
$( "#myForm" ).serialize();
// Creates a query string like this:
// field_1=something&field2=somethingElse
2).serializeArray()
发送一个数据对象,该方法更方便
// Creating an array of objects containing form data
$( "#myForm" ).serializeArray();
// Creates a structure like this:
// [
// {
// name : "field_1",
// value : "something"
// },
// {
// name : "field_2",
// value : "somethingElse"
// }
// ]
2.Client-side validate客户端验证
主要用在提交表单前验证,当然也可以在服务器端验证
// Using validation to check for the presence of an input
$( "#form" ).submit(function( event ) {
// If .required's value's length is zero
if ( $( ".required" ).val().length === 0 ) {
// Usually show some kind of error message here
// Prevent the form from submitting
event.preventDefault();
} else {
// Run $.ajax() here
}
});
// Validate a phone number field
$( "#form" ).submit(function( event ) {
var inputtedPhoneNumber = $( "#phone" ).val();
// Match only numbers
var phoneNumberRegex = /^\d*$/;
// If the phone number doesn't match the regex
if ( !phoneNumberRegex.test( inputtedPhoneNumber ) ) {
// Usually show some kind of error message here
// Prevent the form from submitting
event.preventDefault();
} else {
// Run $.ajax() here
}
});
3.Prefiltering
在发送请求钱修改ajax选项
// Using a proxy with a prefilter
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
if ( options.crossDomain ) {
options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url );
options.crossDomain = false;
}
});
// Using the optional dataTypes argument
$.ajaxPrefilter( "json script", function( options, originalOptions, jqXHR ) {
// Do all of the prefiltering here, but only for
// requests that indicate a dataType of "JSON" or "script"
});
四、Working with JSONP
// Using YQL and JSONP
$.ajax({
url: "http://query.yahooapis.com/v1/public/yql",
// The name of the callback parameter, as specified by the YQL service
jsonp: "callback",
// Tell jQuery we're expecting JSONP
dataType: "jsonp",
// Tell YQL what we want and that we want JSON
data: {
q: "select title,abstract,url from search.news where query=\"cat\"",
format: "json"
},
// Work with the response
success: function( response ) {
console.log( response ); // server response
}
});
五、Ajax Events Ajax事件
// Setting up a loading indicator using Ajax Events
$( "#loading_indicator" )
.ajaxStart(function() {
$( this ).show();
})
.ajaxStop(function() {
$( this ).hide();
});