ajax知识总结系列一

什么是ajax?

• Ajax并不算是一种新的技术，全称是asychronous javascript and xml，可以说是已有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，早期的浏览器并不能原生支持ajax，可以使用隐藏帧（iframe）方式变相实现异步效果，后来的浏览器提供了对ajax的原生支持

• 使用ajax原生方式发送请求主要通过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通信效果

ajax异步请求数据简单流程

刷新和无刷新（局部刷新）

• ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。

同源策略

• ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑

• 报错如下图：
  

跨域问题

• 跨域的概念：协议、域名、端口都相同才同域，否则都是跨域。

• 如下图所示案例：
  

解决跨域的三种方法：

第一种：jsonp，推荐

• 实现原理：

可以动态创建script标签，使用标签的src属性访问js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案

+++ 动态创建script方案：（知道就好）

var script = document.createElement(‘script’);
script.src = ‘./jsonp.php?cb=callback’;
document.body.appendChild(script);

++++++ 采用script标签方案,推荐

• 1，script标签的src方式加载js文件

<script type="text/javascript" src="./xiaoke.js"></script>

• 2，加载js文件内进行函数调用

# xiaoke.js文件中：
hello({username:xiaoke,password:123456});

• 3，数据以函数参数的形式传递
• 4，回调函数中获取参数数据

function hello(data){
        console.log(data.username);
    }

第二种：iframe，过时了

第三种：服务器解决,一般公司是不允许的。

Access-Control-Allow-Origin

jQuery中jsonp的方法：

$.ajax({
    url:'data.js',
    type:'get',
    dataType:'jsonp',
    jsonpCallback:'callBack'
})
.done(function(data){
    alert(data.name);
})
.fail(function() {
    alert('服务器超时，请重试！');
});

// data.js里面的数据： callBack({"name":"xiaoke","age":26});