Ajax的原生方法

Pocher 发布于2019-08-20 18:57 / 2878人阅读

摘要：它可以发送和接收各种格式的信息，包括，，和文本文件。以文本字符串的形式返回服务器响应作为可以使用函数遍历的对象返回响应

简介

Ajax, 是使用XMLHttpRequest对象与服务器进行通信。它可以发送和接收各种格式的信息，包括JSON，XML，HTML和文本文件。它有以下两个功能：

在不重新加载页面的情况下向服务器发出请求

接收并处理来自服务器的数据

步骤 1 创建XMLHttpRequest对象

if (window.XMLHttpRequest) { // 新浏览器...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // 旧浏览器
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

步骤 2 为XMLHttpRequest对象分配处理函数 方法1 分配函数

httpRequest.onreadystatechange = nameOfTheFunction;

方法2 分配匿名函数

httpRequest.onreadystatechange = function () {};

步骤 3 通过open( ),send( )作出HTTP请求

httpRequest.open("GET", "[http://www.example.org/some.file](http://www.example.org/some.file)", true);
httpRequest.send();

open( ) 方法

参数1 HTTP请求的方法 GET、 POST、 HEAD 等，需大写
参数2 发送请求的URL
参数3 异步选项

send( ) 方法

如果使用POST方法，则send的参数为想要发送到服务器的任何数据

步骤 4 处理服务器响应 1.检查请求状态

if (httpRequest.readyState === 4) {
    // Everything is good, the response was received.
} else {
    // Not ready yet.
}

请求状态代码

0（未初始化）或（请求未初始化）

1（加载）或（建立服务器连接）

2（已加载）或（请求收到）

3（交互式）或（处理请求）

4（完成）或（请求完成，响应准备就绪）

2.检查HTTP响应代码

通过检查200OK响应代码，区分AJAX调用是否成功

if (httpRequest.status === 200) {
    // Perfect!
} else {
    // There was a problem with the request.
    // For example, the response may have a 404 (Not Found)
    // or 500 (Internal Server Error) response code.
}

3.进行数据操作

在检查请求的状态和响应的HTTP状态代码之后，可以使用服务器发送的数据进行任何所需的操作。

httpRequest.responseText - 以文本字符串的形式返回服务器响应
httpRequest.responseXML- 作为XMLDocument可以使用JavaScript DOM函数遍历的对象返回响应

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

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

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

原生JS与jQuery对AJAX的实现

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

Chaz 2019-08-21 10:37 评论0 收藏0
原生js实现ajax及get post方法

摘要：使用过的同学，应该对事件绑定方法有一定的了解。实现方式以下为个人类库中实现方式。代码中使用到一个基础方法对象，该对象为的基础类。如果想了解更多，可以通过点击进入查看原码。使用过jQuery的同学，应该对事件绑定方法ajax有一定的了解。在个人类库jTool 中实现了这个方法，这里就来细说下原生实现方式。实现方式以下为个人类库jTool 中 Ajax 实现方式。代码中使用到一个基...

pkhope 2019-08-26 13:54 评论0 收藏0
原生javaScript实现Ajax 和 jQuery实现Ajax

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

ssshooter 2019-08-23 17:03 评论0 收藏0
原生JS封装AJAX请求

摘要：一直在用方法来写请求，用的多了，不免对这其中是怎么实现的产生了兴趣，于是乎，小弟闲来无聊研究了一下原生实现请求，网上看了很多前辈们的关于请求的封装方法，也借鉴了很多经验，于是乎就出现了小弟的一个原生封装的版本，希望大家看了之后能够明白，下面一直在用jQuery方法来写ajax请求，用的多了，不免对这其中是怎么实现的产生了兴趣，于是乎，小弟闲来无聊研究了一下原生实现ajax请求，网上看...

newsning 2019-08-02 15:56 评论0 收藏0
原生JS封装AJAX请求

摘要：一直在用方法来写请求，用的多了，不免对这其中是怎么实现的产生了兴趣，于是乎，小弟闲来无聊研究了一下原生实现请求，网上看了很多前辈们的关于请求的封装方法，也借鉴了很多经验，于是乎就出现了小弟的一个原生封装的版本，希望大家看了之后能够明白，下面一直在用jQuery方法来写ajax请求，用的多了，不免对这其中是怎么实现的产生了兴趣，于是乎，小弟闲来无聊研究了一下原生实现ajax请求，网上看...

hiyang 2019-08-30 13:08 评论0 收藏0