ajax相关试题

时间 2019-11-20

标签 ajax 相关试题栏目 Ajax 繁體版

原文原文链接

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

ajax的全称：Asynchronous Javascript And XML。javascript

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

所谓异步，在这里简单地解释就是：向服务器发送请求的时候，咱们没必要等待结果，而是能够同时作其余的事情，等到有告终果它本身会根据设定进行后续操做，与此同时，页面是不会发生整页刷新的，提升了用户体验。java

Ajax实现过程：node

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

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

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

(4)发送HTTP请求正则表达式

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

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

优势：

不须要插件支持；用户体验极佳；提高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: 未找到页面

属性

描述

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代码

View Code

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， 即： 

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

application/json;charset=utf-8

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