我理解的ajax 跨域 事件代理，委托20170222am

先上代码。

function   submitData(){

var  xhr = createXHR();  //创建一个XHR对象。

xhr.onreadystatechange = function(){

if(xhr.readyState == 4){  //确保已取得所有响应数据

 if((xhr.status >= 200&&xhr.status< 300)||xhr.status==304){  //确定响应成功返回。

alert(xhr.responseText);

}else{

alert("request  was  unsuccessful" + xhr.status);

}

}

};

};  //在open()前，避免跨浏览器不兼容。该代码采用Dom0级方法为XHR对象添加事件处理程序，因为并非所有浏览器都支持Dom2方法。

xhr.open("post","tsxt.php",true);  //准备请求。向服务器发送请求tsxt.php的请求。true表示异步。

xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded");  //设置请求头部信息。

var  form = document.getelementById("user-info");  

xhr.send(serialize(form));  //正式发送请求。取得id为user-info的表单数据将其序列化然后发送给服务器。

后三行代码：使用XHR模仿表单提交。服务端必须有程序读取发送过来的原始数据，并从中解析出有用部分。

XHR属性：

responseText：响应返回的信息

responseXML：响应返回的XML DOM文本（前提是相应的内容类型为text/xml或application/XML）

status：http状态码

statusText：http状态码的说明

readyState：0：未调用open()，未初始化。初始化就是把变量赋为默认值，把控件设为默认状态，把没准备的准备好。

1：调用open()，未调用send()

2：调用send()，未接收到响应

3：发送部分响应信息

4：发送全部响应信息，可在客户端使用。

Dom0级方法，DOM2级方法：

Dom0级：1、在标签内写onclick

<input  id="tfs"  onclick="alert(thanks);">

2、在js里写onclick = function（）{}函数。

document.getElementById("tfs").onclick = function(){

alert(thanks);

}

Dom2级：



二者区别：


事件代理委托


跨域。

jsonp  点击打开链接


1、jsonP：被包含在函数调用中的json。callback({"name":"tfs"});  组成：回调函数和数据。

var  script  =  document.creatElementById（"script"）;

script.src = "http://tfs.com/json/?callback = handleResponse";

document.body.insertBefore(script,document.body.firstChild);

function  handleResponse(){

alert("bala");

}

为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

优点：1、可以访问响应文本。2、支持客户端与服务器端双向通信。

缺点：1、JSONP是从其他域加载代码，容易发生安全问题。2、难以确定JSONP请求是否失败。