概念:Asynchronous Javascript and XML,通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。
工作原理:XMLHttpRequest(xhr)是Ajax的基础,XMLHttpRequest用于后台与服务器交换数据。
XMLHttpRequest对象请求:
open(method,url,async);
send(sting)
XMLHttpRequest对象响应:
responseText
responseXML
onreadystatechange:readyState 0(请求未初始化),1(服务器连接已建立),2(请求已接收),3(请求处理中),4(请求已完成,且响应已就绪)。status:200 400
常用方法:
$(ele).load(),$.ajax(),$.get(),$.post(),$.getJSON(),$getScript()
跨域:服务器端php配置允许跨域(header("Access-Control-Allow-Origin: *"););前端使用jsonp。
jsonp:为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
jsonp原理:ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。
$.ajax({
type:"get",
async:false,
url:"test.php?code=CA1998",
dataType:"jsonp",
success:function(res){
console.log(res);
},
error:function(){
alert('fail');
}
});
1、ajax和jsonp这两种技术在调用方式上”看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装。
2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加。
3、它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题