ajax相关试题

什么是ajax和json，它们的优缺点

ajax的全称：Asynchronous Javascript And XML。

异步传输+js+xml。实现无刷新状态更新页面和异步提交

所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。

Ajax实现过程：

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

(3)设置响应HTTP请求状态变化的函数

(4)发送HTTP请求

(5)获取异步调用返回的数据

(6)使用JavaScript和DOM实现局部刷新

优点：

不需要插件支持；用户体验极佳；提升Web程序性能；减轻服务器和宽带的负担

缺点：

前进后退按钮被破坏；搜索引擎的支持不够；不利于SEO；开发调试工具缺乏

JSON（JavaScript Object Notation）和XML一样也是一种简单文本格式。是一种比较流行的标准格式，是数据的载体，相对于XML，JSON更加易读、更便于肉眼检查。在语法的层面上，JSON与其他格式的区别是在于分隔数据的字符，JSON中的分隔符限于单引号、小括号、中括号、大括号、冒号和逗号。

优点：

   作为一种数据传输格式，JSON 与 XML 很相似，但是它更加灵巧。

   JSON不需要从服务器端发送含有特定内容类型的首部信息。

缺点：

   语法过于严谨；   代码不易读；   eval 函数存在风险

ajax的编写步骤

//第一 创建request对象
var xhr = (function() {
    var xhr;
    //针对FireFox，Mozillar，Opera，Safari，IE7，IE8 
　　 if (window.XMLHttpRequest) {     
        //code for IE7+, Firefox, Chrome, Opera, Safari   
        xhr = new XMLHttpRequest();     
        //针对某些特定版本的mozillar浏览器的BUG进行修正     
        if (xhr.overrideMimeType) {     
            xhr.overrideMimeType("text/xml"); 
　　　　　}    
     } else if (window.ActiveXObject) {     
         // code for IE6, IE5
        try{
            xhr = new ActiveXObject("MSXML2.XMLHTTP");
        }catch(e){
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        } 
     }     
     return xhr;      　
})()

//第二 将这个对象设置为开启状态
/*open(method,url,async) : 1请求方式   2请求地址   3是否异步 */
xhr.open("get", url, true);

//第三
//请求完成后的动作
if(xhr.onload){
    xhr.onload = function(){
        alert(xhr.responseText);
    }
} else {
    xhr.onreadystatechange = function(){//xhr.readyState  取值范围  0  1  2  3  4
        if(xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    }
}

//第四 发送
/*send(string), string：仅用于 POST 请求*/
xhr.send();

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

语法：setRequestHeader(header,value)，向请求添加 HTTP 头。header: 规定头的名称 value: 规定头的值 

xhr.open("POST","ajax_test.asp",true);

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhr.send("fname=Bill&lname=Gates");

tips:常见的请求头（以表格中）

• application/x-www-form-urlencoded： 窗体数据被编码为名称/值对。这是标准的编码格式。
•  multipart/form-data： 窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分，这个一般文件上传时用。
•  text/plain： 窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。

open(method,url,async),非异步请求

当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

xhr.open("GET","test1.txt",false);

xhr.send();

document.getElementById("myDiv").innerHTML=xhr.responseText;

获得来自服务器的响应，xhr.responseText 与 xhr.responseXML

responseText   获得字符串形式的响应数据。
responseXML    获得 XML 形式的响应数据。

来自服务器的响应并非 XML，请使用 responseText 属性。

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

tips:onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

ajax请求携带cookie

xhr属性withCredentials，默认值为false，表示请求时不携带cookie

xhr.withCredentials = true； // 支持跨域发送cookies

写一段ajax提交的js代码

get请求和post请求的区别？

 GET 还是 POST？ 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

 然而，在以下情况中，请使用 POST 请求： 

• 无法使用缓存文件（更新服务器上的文件或数据库）
•  向服务器发送大量数据（POST 没有数据量限制） 
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

jQuery中的ajax：

$.ajax({  
    //默认情况下，Ajax请求方式使用GET方法  
    type:"get|post",  
    //指定服务器返回的数据处理方式，默认情况下将自动根据 HTTP 包 MIME 信息来智能判断  
    //如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。  
    //这种情况下，$.ajax()不再返回一个XMLHttpRequest对象，并且也不会传递事件处理函数，比如beforeSend。  
    dataType:"XML|html|json|jsonp|script|text",  
    //请求地址  
    url:"",  
    //是否异步，异步：所有的操作都是并行的，完成的顺序没有前后关系  
    async:true,  
    //默认情况下，请求总会被发出去，但浏览器有可能从他的缓存中调取数据。  
    //要禁止使用缓存的结果，可以设置cache参数为false。  
    cache:false,  
    //data选项既可以包含一个查询字符串，比如 key1=value1&key2=value2   
    //也可以是一个映射，比如 {key1: 'value1', key2: 'value2'}  
    //发送到服务器的数据。将自动转换为请求字符串格式。如上则转换为：&key1=value1&key2=value2  
    data:"",  
    //data选项传递进来的数据是否转换成一个查询字符串  
    processData:"true"  
    //当datatype："jsonp"时有效，指定回调函数的参数名来取代默认的callback  
    jsonp:"callback_replace",  
    //为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。  
    jsonpCallback:"cb",  
    //当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。  
    success:function(data,successStr){},  
    //error 在请求出错时调用。传入XMLHttpRequest对象，错误信息以及一个异常对象（如果有的话）  
    // 通常 textStatus 和 errorThrown 之中，只有一个会包含信息  
    error :function(xhr, textStatus, errorThrown)},  
    //发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。  
    //这是一个 Ajax 事件。如果返回false可以取消本次ajax请求。  
    beforeSend :fucntion(xhr){  
        this; // 调用本次AJAX请求时传递的options参数  
    },  
    //一个额外的"{键:值}"对映射到请求一起发送。此设置被设置之前beforeSend函数被调用;  
    //因此，消息头中的值设置可以在覆盖beforeSend函数范围内的任何设置。  
    headers:"",  
    //一个mime类型用来覆盖XHR的 MIME类型。  
    mimeType:"",  
    //用于响应HTTP访问认证请求的用户名  
    username:"",  
    //用于响应HTTP访问认证请求的密码  
    password:"",  
    //在请求成功之后调用。传入返回的数据以及"dataType"参数的值。  
    //并且必须返回新的数据（可能是处理过的）传递给success回调函数。  
    dataFilter:function(data,type){  
        var _data = data;  
        return _data;  
    },  
    //当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。  
    complete:function(xhr,textStatus){},  
    //一个以"{字符串:正则表达式}"配对的对象，用来确定jQuery将如何解析响应，给定其内容类型。  
    contents:"",  
    //这个对象用于设置Ajax相关回调函数的上下文。如下，则success回调函数的上下文（this）为这个DOM元素  
    context: document.body,  
    //让回调函数内this指向这个对象（如果不设定这个参数，那么this就指向调用本次AJAX请求时传递的options参数）。  
    //MIME发送信息至服务器时内容编码类型,默认 application/x-www-form-urlencoded   
    contentType:,  
    //Ajax请求是限时的，所以错误警告被捕获并处理后，可以用来提升用户体验设置请求超时时间（毫秒）。此设置将覆盖全局设置。  
    //请求超时这个参数通常就保留其默认值，要不就通过jQuery.ajaxSetup来全局设定，很少为特定的请求重新设置timeout选项。  
    timeout:"",  
    //默认： 取决于数据类型。  
    //内容类型发送请求头，告诉服务器什么样的响应会接受返回。如果accepts设置需要修改，推荐在$.ajaxSetup()方法中做一次。  
    accepts:"",  
    //一个数据类型对数据类型转换器的对象。每个转换器的值是一个函数，返回响应的转化值  
    converters: {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML},  
    //(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，  
    //如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。  
    global:true,  
    //允许给<script>标签的请求设定一个特定的字符集，用于script或者jsonp类似的数据。  
    //只有当请求时dataType为"jsonp"或"script"，并且type是"GET"才会用于强制修改charset。通常只在本地和远程的内容编码不同时使用。  
    scriptCharset："utf-8", 
    //一对“文件名-文件值”在本机设置XHR对象。例如，如果需要的话，你可以用它来设置withCredentials为true的跨域请求。
    xhrFields: {withCredentials: true},
　　//默认： 同域请求为false 跨域请求为true如果你想强制跨域请求（如JSONP形式）同一域，设置crossDomain为true。这使得例如，服务器端重定向到另一个域
    crossDomain: true,
}); 

  jquery中ajax 跨域携带COOKIE

 $.ajax({
    type: "POST",
    url: "http://xxx.com/api/test",
    dataType: 'jsonp',
    xhrFields: {withCredentials: true},
    crossDomain: true,
})

服务器端设置cors跨域：

header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: http://www.xxx.com");

tips：此外zepto中ajax请求参数配置基本与jquery一致

其他的ajax请求：

Axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。API：http://www.cnblogs.com/fanlinqiang/p/7756474.html
这里要注意的是：axios默认提交数据的格式是json， 即： application/json;charset=utf-8

Fetch API它被定义在BOM的window对象中，你可以用它来发起对远程资源的请求。 该方法返回的是一个Promise对象，让你能够对请求的返回结果进行检索。
　　API：http://www.cnblogs.com/fanlinqiang/p/7954354.html

 

JSON.stringify报错

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 't'
    |     property '_cfg' -> object with constructor 'Object'
    --- property 'canvas' closes the circle"

原因是：对象有一个循环引用

解决方法：

                var cache = [];
                var str = JSON.stringify(data, function(key, value) {
                    if (typeof value === 'object' && value !== null) {
                        if (cache.indexOf(value) !== -1) {
                            // Circular reference found, discard key
                            return;
                        }
                        // Store value in our collection
                        cache.push(value);
                    }
                    return value;
                });
                cache = null; // Enable garbage collection