ajax总结

一、ajax简介

Ajax = Asynchronous JavaScript and XML （异步的JavaScript和XML），Ajax是一种用于创建快速动态网页的技术。Ajax最大的优点就是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 

二、ajax用法

跨域:

jquery方法封装：(jsonp跨域只能用于get请求，即使指定了post，也会变为get)

后台php头文件需要添加   header("Access-Control-Allow-Origin:*"); 

其中，*表示所有客户端，当然也可以指定

1. // 指定允许其他域名访问  
2. header('Access-Control-Allow-Origin:*');  
3. // 响应类型  
4. header('Access-Control-Allow-Methods:POST');  
5. // 响应头设置  
6. header('Access-Control-Allow-Headers:x-requested-with,content-type');  

$.ajax({
    type:"GET",
    url:"http://www.deardull.com:9090/getMySeat", //访问的链接
    dataType:"jsonp",  //数据格式设置为jsonp
    jsonp:"callback",  //Jquery生成验证参数的名称
    success:function(data){  //成功的回调函数
        alert(data);
    },
    error: function (e) {
        alert("error");
    }
});

$.ajax({
    async : true,
    url : "https://api.douban.com/v2/book/search",
    type : "GET",
    dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
    jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
    jsonpCallback: 'handleResponse', //设置回调函数名
    data : {
        q : "javascript",
        count : 1
    },
    success: function(response, status, xhr){
        console.log('状态为：' + status + ',状态是：' + xhr.statusText);
        console.log(response);
    }
});

jsonp跨域的原理：

动态创建src属性，由于img、link、script的src获取数据不是跨域，因此可以进行数据传输

具体的跨域原理：

var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

在页面中，返回的JSON作为参数传入回调函数中，我们通过回调函数来来操作数据。

function handleResponse(response){
    // 对response数据进行操作代码
}

缺点：如果不确定请求的URL是否安全，最好不用这种方法，这种跨域的方法并不安全

用post请求时，还需设置：

ajax.setRequestHeader('content-type', "application/x-www-form-urlencoded");

html中的enctype属性: 
enctype：规定了form表单在发送到服务器时候编码方式。他有如下的三个值。 
①application/x-www-form-urlencoded。默认的编码方式。但是在用文本的传输和MP3等大型文件的时候，使用这种编码就显得 效率低下。 
②multipart/form-data 。 指定传输数据为二进制类型，比如图片、mp3、文件。 
③text/plain。纯文体的传输。空格转换为 “+” 加号，但不对特殊字符编码。

$.ajax({
    type: "POST",
    url: "test.php",
    data: "name=garfield&age=18",
    success: function(data){
        $("#myDiv").html('<h2>'+data+'</h2>');
    }
});

ajax请求过程：

1. 创建对象（xmlHttp)，判断是否为IE浏览器并给对象赋值

2. 异步调用服务器数据

3. 检查对象的onreadystatechange状态