Ajax 和 JSONP

Ajax

Ajax主要是与服务器进行交换数据，在不重新加载整个页面的情况下，更新部分网页，也就是按需加载。是一种用于创建快速动态网页的技术。
Ajax是遵循同源策略的：端口号 协议 域名 完全相同。有一个不相同就不能进行交互。
Ajax四步：
var xhr = new XMLHttpRequest();
xhr.open('get',url,true)
xhr.send();
xhr.onreadystatechange = function(){
   if(xhr.readyState == 4 && xhr.status == 200){
            console.log(xhr.responseText)
   }
}
当为post请求时，需要设定请求头：
setRequestHeader('content-type','application/X-www-form-urlencoded')

get/post的区别：
1.get是从服务器上获取数据，post是向服务器传送数据。
2.在客户端，Get方式在通过URL提交数据，数据在URL中可以看到；POST方式，数据放置在HTML HEADER内提交。
3.对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4.GET方式提交的数据最多只能有1024字节，而POST则没有此限制。
5.安全性问题。正如在1中提到，使用 Get 的时候，参数会显示在地址栏上，而 Post 不会。所以，如果这些数据是中文数据而且是非敏感数据，那么使用get；如果用户输入的数据不是中文字符而且包含敏感数据，那么还是使用 post为好。

JSONP

和ajax相同，都是客户端向服务器端发送请求；给服务器端传递数据或者从服务器端获取数据。
jsonp是非同源策略（跨域请求）；

非同源： 端口号、协议、域名任意一个不相同；

jsonp的原理：
在script的世界里，没有同源跨域，只要给的src属性的值是一个合法的地址，script就可以把要的内容请求回来。

jsonp的过程：
1.把需要请求数据的那个跨域的API数据接口的地址赋值给script的src;
 function fn(responseText){}
 var script = document.createElement_x('script');
 script.src = 跨域的url
2.把当前页面中的某一个函数名当做参数值传递给需要跨域请求数据的服务器（url?fn）
 script.src = 跨域的url?callback=fn
3.服务器接收到请求后，进行特殊处理，把传递进来的函数名和它需要返回的数据拼接成一个字符串“fn([{'name':'hack'}])”
4.服务器吧准备好的数据通过HTTP协议返回客户端，客户端让接收过数据的fn执行。
fn(responseText)；