ajax解析

ajax
1.什么是ajax?
AJAX,即 Asynchronous(异步的) JavaScript and XML。
AJAX不是一门新的语言，而是对现有技术的综合运用。
其本质是在HTTP协议的基础上以异步的方式与服务器进行通信。它的主要特点就是允许浏览器发送请求和处理响应的时候不用刷新整个页面。
AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量的数据交换，AJAX可以使网页实现异步更新。即在不重载整个网页面的情况下，对网页的某部分进行更新。

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到 服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回 给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。

2.JavaScript ajax与jQuery ajax
2.1.JavaScript ajax
js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原生的Ajax完成异步操作，有如下几个步骤：

1）创建Ajax引擎对象
2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
3）绑定提交地址
4）发送请求
5）接受响应数据
2.2.jQuery ajax
jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种：[]表示可选

$.ajax([options])
load(url,[data],[callback])
$.get(url,[data],[fn],[type])
$.getJSON(url,[data],[fn])
$.getScript(url,[callback])
$.post(url,[data],[fn],[type])

开发中经常使用的有三种

1）$.get(url, [data], [callback], [type])
2）$.post(url, [data], [callback], [type])

3.ajax请求与普通请求的区别
基于浏览器的http请求分为普通请求和ajax请求，普通请求都是同步执行的，ajax请求可以同步也可以异步(默认异步)。当这两种请求到达服务端时候，我们可以通过x-requested-with这个header字段加以区分。如果是普通请求没有这个header，取到为null。如果是ajax请求，取到是XMLHttpRequest。
因为ajax请求header字段是可以设置的，我们能否重置这个header，伪装成普通请求呢？答案是没法彻底重置的。如果我们自己设置了x-requested-with这个字段，浏览器还是会去再设置一遍这个值。chrom和ie的做法是直接追加，即服务端打印的结果是：自定义的值，XMLHttpRequest。而火狐是直接打印：XMLHttpRequest。
另外如果我们在ajax请求中自行设置referer这个header也是没有效果的，浏览器会直接覆盖你所设置的值。

AJAX 请求就像是普通请求：发送到服务器的请求依然跟普通请求一样有着一个 HTTP 请求该有的所有组成部分，并且服务器处理 AJAX 请求的方法跟处理普通请求也是一样的。唯一不同就是，不是通过浏览器刷新来处理响应，而通常由客户端的一些 javascript 代码来处理。
4.ajax请求资源
尽管名字里有XML, 但 XMLHttpRequest 可以取回所有类型的数据资源，并不局限于XML。 而且除了HTTP ,它还支持file 和 ftp 协议。

5.同源策略
AJAX 是严格遵守同源策略的，既不能从另一个域读取数据，也不能发送数据到另一
个域。不过有一种情况，可以发送数据到另一个域，W3C 的新标准中，CORS（Cross-Origin
Resource Sharing）开始推进浏览器支持这样的跨域方案，现在的浏览器都支持这个方案了，
过程如下：
www.foo.com（来源域）的 AJAX 向 www.evil.com（目标域）发起了请求，浏览器会
给自动带上 Origin 头，如下：
Origin: http://www.foo.com
然后目标域要判断这个 Origin 值，如果是自己预期的，那么就返回：
Access-Control-Allow-Origin: http://www.foo.com
表示同意跨域。如果 Access-Control-Allow-Origin 之后是*通配符，则表示任意域都可
以往目标跨。如果目标域不这样做，浏览器获得响应后没发现 Access-Control-Allow-Origin
头的存在，就会报类似下面这样的权限错误：
XMLHttpRequest cannot load http://www.evil.com. Origin http://www.foo.com
is not allowed by Access-Control-Allow-Origin.
代码如下：
1
$.ajax({
    url:'http://y2.ifengimg.com/e01ed39fc2da5d4a/2014/0318/newsn_02.jpg',
    data: {},
    method:'get',
    success:function(){
        console.log('ff');
    },
    fail: function(){
        console.log('fail');
    }
}); // XMLHttpRequest cannot load http://y2.ifengimg.com/e01ed39fc2da5d4a/2014/0318/newsn_02.jpg. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://a.test.com:8091' is therefore not allowed access.

6.ajax应用
6.1.下载文件

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://a.test.com:8091/static/v3/dubaChannelCommon/img/icon/play.png');
xhr.responseType = 'blob'; // 1

xhr.onload = function() {
    if (this.status == 200) {
        var img = document.createElement('img');
        console.log(this.response);
        img.src = window.URL.createObjectURL(this.response); // 2
        img.onload = function() {
            window.URL.revokeObjectURL(this.src); //3
        };
        document.body.appendChild(img);
    }
};
xhr.send();

6.2.上传文件

var formData = new FormData(); // 2
formData.append('id', 123456);
formData.append('topic', 'performance');
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.onload = function() { 
    console.log9('load');
};
xhr.send(formData);

参考文章:
JavaScript Ajax和jQuery Ajax
ajax基础总结笔记
基于浏览器的http普通请求与ajax请求
你不知道的 XMLHttpRequest