jQuery中的JSON和Ajax
1.什么是Ajax?
Ajax全称Asynchronous JavaScript and XML（异步的JavaScript和XML）
2.Ajax的优缺点
优点：
- 异步模式，提升用户体验
- 减少不必要的数据传输
- Ajax引擎在客户端运行，成单率一部分本来有服务器承担的工作。
缺点：
- 不支持浏览器back按钮
- 安全问题：Ajax暴露了与服务器交互的细节
- 对搜索引擎的支持比较差
3.XMLHttpRequest对象
XMLHttpRequest的作用：可以向服务器提出请求并处理响应，而不阻塞用户；可以在页面加载以后进行页面的局部更新。
3.1 第1步：创建XMLHttpRequest对象
我们封装一个函数，以兼容各个浏览器版本：
<script type="text/javascript">
//封装通用的xhr对象，兼容各个浏览器版本
function createXHR(){
//判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7/firefox/opera等
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
//将所有可能出现的ActiveXOBject版本放在一个数组中
var xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
//遍历创建XMLHttpRequest对象
var len = xhrArr.length,xhr;
for(var i = 0;i<len;i++){
try{
//创建XMLHttpRequest对象
xhr = new ActiveXObject(xhrArr[i]);
break;
}
catch(ex){
}
}
return xhr;
}
else{
throw new Error("No XHR object available!");
}
}
var xhr = createXHR();
console.log(xhr);
</script>
3.2 第2步：创建一个新的HTTP请求
//第二步 创建请求
xhr.open("get","MAMP-PRO-Logo.png",true);
3.3 第3步：设置状态请求变化函数与send
//第三步
xhr.onreadystatechange = function(){
//异步调用成功，响应内容解析完成
if(xhr.readyState === 4){
if(xhr.status >=200 && xhr.status<300 || xhr.status===304){//304表示资源没有被修改，可以使用缓存
// 获得服务器返回的数据
}
}
}
3.4 第4步：发送请求
//无参
xhr.send(null);
//有参
xhr.send({name:"zhangsan",age:20});
== 完整请求 ==
<script type="text/javascript">
//封装通用的xhr对象，兼容各个浏览器版本
function createXHR(){
//判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7/firefox/opera等
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
//将所有可能出现的ActiveXOBject版本放在一个数组中
var xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
//遍历创建XMLHttpRequest对象
var len = xhrArr.length,xhr;
for(var i = 0;i<len;i++){
try{
//创建XMLHttpRequest对象
xhr = new ActiveXObject(xhrArr[i]);
break;
}
catch(ex){
}
}
return xhr;
}
else{
throw new Error("No XHR object available!");
}
}
//第一步
var xhr = createXHR();
//第三步
xhr.onreadystatechange = function(){
//异步调用成功，响应内容解析完成
if(xhr.readyState === 4){
if(xhr.status >=200 && xhr.status<300 || xhr.status===304){//304表示资源没有被修改，可以使用缓存
// 获得服务器返回的数据
}
}
}
//第二步 创建请求
xhr.open("get","MAMP-PRO-Logo.png",true);
//第四步 发送请求
xhr.send(null);
</script>
3.5 获取服务器端返回的数据
4.jQuery的ajax方法
5.跨域
同源：域名、协议、端口均相同
跨域：指的是从一个域名的网页去请求另外一个域名的资源，严格一点的定义是：只要协议、域名、端口有任何一个的不同，就被当做是跨域。
如何解决跨域问题：
- 跨域资源共享（CORS）
- 使用JSONP
- 修改document.domain
- 使用window.name
如何使用JSONP处理跨域问题？
JSONP是JSON with Padding（填充式Json）的简写，是应用JSON的一种新方法，也是一种跨域解决方案。
JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数的JSON数据。
在html中，href属性和src属性可以实现跨域访问
完整代码：
// 封装JSONP
function getJSONP(url,callback){
if(!url){
return;
}
// 声明数组用来随机生成函数名
var a = ['a','b','c','d','e','f','g','i','h','j'],
r1 = Math.floor(Math.random()*10),
r2 = Math.floor(Math.random()*10),
r3 = Math.floor(Math.random()*10),
name = 'getJSONP' + a[r1] + a[r2] + a[r3],
cbname = 'getJSONP.' + name;
// 判断url地址中是否含有?号
if(url.indexOf('?') === -1){
url += '?jsonp=' + cbname;
}else{
url += '&jsonp=' + cbname;
}
// 动态创建script标签
var script = document.createElement('script');
// 定义被脚本执行的回调函数
getJSONP[name] = function(data){
try{
callback && callback(data);
} catch(e){
//
}finally{
// 最后删除该函数及script标签
delete getJSONP[name];
script.parentNode.removeChild(script);
}
}
// 定义script的src
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
getJSONP("http://class.imooc.com/api/jsonp",function(data){
console.log(data);
});
