js课程笔记（五）ajax 和 jsonp

一、ajax（asynchronous javascript and xml）

1.类型：GET  和 POST 

2.创建过程：类似于打电话

1.有一部电话（new 一个ajax对象）

2.拨号（open一个连接）

3.说话（send数据）

4.等别人说话（onreadystatechange事件监听是否完成）

3.为什么会出现，是由于form表单的一些缺点

form：必须有action 和 method 和 表单元素的name值

form缺点：

1）只能从浏览器端提交数据到服务器端，反之不可

2）提交后要跳转页面，回退刷新页面

4.特点：

1）中文乱码问题（前后端编码一致）

2）不care后端返回的文件格式

3）取回来的都是字符串，需要eval转可执行程序

4）缓存需要在每次的请求路径上+随机数或者时间戳

5.封装的方法

function jsonToStr(json){
var arr=[];
json.t = Math.random();
for(var name in json){
arr.push(name+"="+json[name]);
}
return arr.join("&");
}
function ajax(json){
var json = json || {};
json.type = json.type || "GET";
json.data = json.data || {};
json.url = json.url;
if(!json.url){
console.log("没有url地址");
return ;
}


//1.new 
var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
}else{
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.opend and 3.send
switch (json.type){
case "GET":
oAjax.open("GET",json.url+"?"+jsonToStr(data),true);
oAjax.send();
break;
case "POST":
oAjax.open("POST",json.url,true);
oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
oAjax.send(jsonToStr(data));
break;
}
//4.recieve
oAjax.onreadystatechange = function(){
if(oAjax.readyState == 4){
if(oAjax.status >=200 && oAjax.status <300||oAjax.status==304){
json.success && json.success(oAjax.responseText);
}else{
json.fail && json.fail(oAjax.status);
}
}
}


}

6.http状态码常用的几个(2开头的基本是接收成功的，4开头的是浏览器端错，5开头的是服务器端错)

1)200(ok)

2)304(not modified)

3)404(not found)

4)500(internal server error)

二，jsonp(JSON with Padding)解决跨域的方法之一（本质是函数的调用）

1.跨域产生的原因

1）同一域名，不同端口

2）同一域名，不同协议

3）同一域名，不同二级域名

4）域名和ip

5）主域相同，子域不同

6）域名不同

2,封装代码（类似ajax封装，但不是一个事情）

function jsonToStr(json){
var arr = [];
for(var name in json){
arr.push(name+'='+json[name]);
}
var str = arr.join('&');
return str;
}
// url,data,success,cbName
function jsonp(json){
json = json || {};
if(!json.url){
alert('用法不符合规范');
return;
}
json.data = json.data || {};
json.cbName = json.cbName || 'cb';


var fnName = 'show'+Math.random();
fnName = fnName.replace('.','');


window[fnName] = function(a){
json.success && json.success(a);
oH.removeChild(oS);
}


// 动态创建script标签
var oS = document.createElement('script');
json.data[json.cbName] = fnName;
oS.src=json.url+'?'+jsonToStr(json.data);
var oH = document.getElementsByTagName('head')[0];
oH.appendChild(oS);
}