JavaScript原生Ajax

JessYanCoding 发布于2019-08-23 10:37 / 1401人阅读

摘要：请求终止时会调用事件处理程序，此时为，这就会调用事件。强行让对象将响应作为处理。在请求发生错误时触发。最终，实现中引入了事件，用以替代事件。事件事件会在浏览器接收新数据期间周期性地触发。

Ajax请求 一、创建XHR 1、在IE7及其更高的版本中：

var xhr = new XMLHttpRequst();

2、在IE7之前的的版本中使用createXHR函数根据IE中可用的MSXML库创建最新版本的XHR对象：

function createXHR(){
            if (typeof XMLHttpRequest != "undefined"){
                return new XMLHttpRequest();
            } else if (typeof ActiveXObject != "undefined"){
                if (typeof arguments.callee.activeXString != "string"){
                    var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
                                    "MSXML2.XMLHttp"];
                    var i;
                    var len;
            
                    for (i=0,len=versions.length; i < len; i++){
                        try {
                            new ActiveXObject(versions[i]);
                            arguments.callee.activeXString = versions[i];
                            break;
                        } catch (ex){
                            //skip
                        }
                    }
                }
            
                return new ActiveXObject(arguments.callee.activeXString);
            } else {
                throw new Error("No XHR object available.");
            }
        }
var xhr = createXHR();

二、XHR的用法

xhr包含四个方法：

xhr.open();//接受3个参数：发送请求的类型，请求的地址，是否异步请求
xhr.setRequestHeader();//接受两个参数：设置htttp头部的名字，设置http头部的值
xhr.send();//接受一个参数：作为请求主体的数据
xhr.abort();//取消异步请求

1、xhr.open()以及xhr.send()

xhr.open()注意：发送请求的地址相对执行代码的当前页面。
当调用send()之后，请求将发送到后台并且服务器响应之后xhr对象的属性将被自动填充：

responseText:获得字符串形式的响应数据。
responseXML:获得 XML 形式的响应数据。
status:响应http的状态。
statusText:响应状态说明。

2、readyState属性

说明：这个属性表示请求或者是响应个过程的当前活动阶段。

0: 未初始化。未调用open()方法。
1: 启动。已调用open()，未调用send()
2: 发送。已调用send(),尚未接收到响应数据
3: 接收。接收到部分响应数据
4: 完成。已经接收到所有数据

readyState每次改变时将会触发readystatechange事件。
可以在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器的兼容性。

//例子
var xhr = createXHR();        
xhr.onreadystatechange = function(event){
    if (xhr.readyState == 4){
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            alert(xhr.responseText);
        } else {
            alert("Request was unsuccessful: " + xhr.status);
        }
    }
};
xhr.open("get", "example.txt", true);
xhr.send(null);

三、请求类型 1、GET请求

说明：用于向服务器查询信息。
通常将查询的变量加在请求地址之后
比如说：xxx.xxx.xx?id=2  向服务器传递了一个参数名字叫name值为1

用下面这个函数实现添加参数

function addURLParam(url, name, value) {
    url += (url.indexOf("?") == -1 ? "?" : "&");
    url += encodeURIComponent(name) + "=" +encodeURIComponent(value);
    return url ;
}

2、POST请求

说明：通常向服务器发送应该保存的数据

使用方法：

xhr.open("post","请求地址",true);

post请求消耗的资源比get请求要多。发送相同的数据，get的速度最多可以达到post的两倍

四、XMLHTTPRequest 2级 1、FormData

说明：序列化表单以及创建与表单格式相同的数据。
之前在文章中提到过，具体点这里

2、超时限定

XHR的timeout属性，表示请求等待响应多少毫秒之后就会自动终止。
请求终止时会调用ontimeout事件处理程序，此时readyState为4，这就会调用onreadystatechange事件。但是如果超时终止请求之后再访问status属性就会报错。这里可以使用try-catch中去处理检查status属性。

3、overrideMimeType()

强行让XHR对象将响应作为XML处理。

4、进度事件

loadstart：在接收到相应数据的第一个字节时触发。
progress：在接收相应期间持续不断触发。
error：在请求发生错误时触发。
abort：在因为调用abort()方法而终止链接时触发。
load：在接收到完整的相应数据时触发。
loadend：在通信完成或者触发error、abort或load事件后触发。

每个请求不对触发Loadstart事件开始，接下来是一或多个progress事件，然后触发error、abort或load事件中的一个，最后以触发loadend事件结束。

4.1

Firefox在实现XHR对象的某个版本时，曾致力于简化异步交互模型。最终，Firefox实现中引入了load事件，用以替代readystatechange事件。响应接收完毕后将触发Load事件，因此也就没有必要去检查readyState属性了。而onload事件处理程序会接收到一个event对象，其target属性就指向XHR对象实例，因而可以访问到XHR对象的所有方法和属性。然而，并非所有浏览器都为这个事件实现了适当的事件对象。结果，开发人员还是要像下面这样被迫使用XHR对象变量。

var xhr = createXHR();
xhr.onload = function () {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        alert(xhr.responseText);
    } else {
        alert("Request was unsuccessful: " + xhr.status);
    }
};
xhr.open("get", "altevents.php", true);
xhr.send(null);

只要浏览器接收到服务器的响应，不管其状态如何，都会触发load事件。而这意味着你必须要检查status属性，才能确定数据是否真的已经可用了。Firefox、Operan、Chrome和Safari都支持load事件。

4.2、progress事件

progress事件会在浏览器接收新数据期间周期性地触发。而onprogress事件处理程序会接收到一个event对象，其target属性是XHR对象，但包含着三个额外的属性：lengthComputable、loaded和total。其中，lengthComputable是一个表示进度信息是否可用的布尔值，loaded表示已经接收的字节数，loaded表示根据Content-Length响应头部确定的预期字节数。有了这些信息，我们就可以为用户创建一个进度指示器了。

云服务器 GPU云服务器原生ajax 原生php ajax ajax原生js实现原生js封装ajax

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96526.html

原生javaScript实现Ajax 和 jQuery实现Ajax

摘要：作者后台使用的是语言，所以这里以后台为例子不影响学习一原生使用方法创建对象兼容处理处理低版本不兼容问题准备发送请求方式接口参数名参数值异步执行发送回调是表示数据解析完成，后台处理完成了。是表示处理的结果是的。作者后台使用的是php语言，所以这里以php后台Api为例子,不影响学习Ajax 一、 javaScript原生使用Ajax 1.get方法 //1.创建对象兼容处理 var ...

ssshooter 2019-08-23 17:03 评论0 收藏0
原生JavaScript实现AJAX、JSONP

摘要：在这里讲解一下用原生如何实现。当然，前面也说过，你可以给定固定回调函数名最后我已经将和请求合并在一起了，下载链接原文链接原生实现如有问题，欢迎在下方留言相信大多数前端开发者在需要与后端进行数据交互时，为了方便快捷，都会选择JQuery中封装的AJAX方法，但是有些时候，我们只需要JQuery的AJAX请求方法，而其他的功能用到的很少，这显然是没必要的。其实，原生JavaScript...

xcc3641 2019-08-20 14:06 评论0 收藏0
前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
原生 JavaScript 发送 Ajax 请求

Ajax Asynchronous JavaScript + XML 作用实现页面的部分更新写法 var r = new XMLHttpRequest() r.open(method, path) r.onreadystatechange = function() { if (r.readyState == 4) { r.setRequestHeader(Content-Type,...

赵春朋 2019-08-26 13:41 评论0 收藏0
原生JS与jQuery对AJAX的实现

摘要：原生与对的实现一定义里这么解释异步的和。二原生实现所有现代浏览器以及均内建对象。一般是正常未找到页面，一般是错误，或者后台没有创建相应的内部服务错误，多为后台错误。基本上通过发送的数据及传回的数据就能定位问题所在了。原生JS与jQuery对AJAX的实现一、定义 W3C里这么解释AJAX： AJAX = Asynchronous JavaScript and XML（异步的 Jav...

Chaz 2019-08-21 10:37 评论0 收藏0