原生js实现ajax

Ajax

ajax是一个异步请求数据的技术。
浏览器有提供相关的对象：window.XMLHttpRequest 或 window.ActiveXObject。

发送Ajax请求过程如下：

1. 创建 XMLHttpRequest 对象
2. 监听状态对象状态变化
3. 设置 XMLHttpRequest 对象
4. 发送请求

代码如下:

 1     var xmlhttp = null;
 2     var data = "";            // 返回data
 3
 4     if(window.XMLHttpRequest) {
 5         xmlhttp = new XMLHttpRequest();
 6     }
 7     else {
 8         xmlhttp = window.ActiveXObject("Microsoft.XMLHTTP");
 9     }
10
11     if(xmlhttp!=null) {
12         xmlhttp.onreadystatechange = stateChange;
13         xmlhttp.open("GET", url, true);
14         xmlhttp.send(null);
15     }
16
17     function stateChange(){
18         // load
19         if(xmlhttp.readyState==4){
20             var status = xmlhttp.status;
21             // 成功
22             if(status==200){
23                 data = xmlhttp.responseText;
24             }
25             else if(status==404){
26                 console.error("404 NOT FOUND!");
27             }
28             else{
29                 console.error("error");
30             }
31         }
32     }

xmlhttp相关属性/方法说明：

onreadystatechange：
服务器接收请求后会返回服务器的当前状态（readyState）。每次返回都状态都会触发onreadystatechange()。
状态码：
　　0: 请求未初始化
　　1: 服务器连接已建立
　　2: 请求已接收
　　3: 请求处理中
　　4: 请求已完成，且响应已就绪

open：
　　设置xmlhttp对象。open(method, url, async)。

open参数说明：
　　method：请求方法。　　 // GET、POST
　　url：请求的数据。　　 // http://www.xxxxx.com/p/a/t/h
　　async：是否异步　　　　 // true、false

setRequestHeader(header, value): 向请求添加 HTTP 头。
send({param}): 发送请求。param为参数，只有POST才有参数。

readyState：返回服务器返回的状态。readyState改变时，会触发onreadystatechange事件
status：发送请求后，服务器返回的状态码。

responseXML: 接收返回的xml数据
responseText: 接收返回的Text数据

转载于:https://www.cnblogs.com/lilijing/p/4417450.html

原生js实现ajax相关推荐

原生js实现Ajax，JSONP
Ajax内部的几个执行步骤创建XMLHttpRequest对象(new XMLHttpRequest()) 设置请求头(setRequestHeader) 连接服务器(open()) 设置回调(on ...
使用原生js写ajax
// 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){if(typeof XMLHttpRequest != "undefined"){ ...
Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
java原生的ajax怎么写,用原生js实现 ajax方法
原标题:用原生js实现 ajax方法作者介绍:咔拉宝宝前端工程师,致力于首个情景式购物商城咔拉商城的前端搭建,在咔拉职场栏目作为程序猿担当,与读者朋友们共同探讨前端开发的那些事. 一.ajax介绍: ...
js原生ajax跨域请求,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言关于纯js的ajax请求,我之前有文章写过, https://www.haorooms.com/post/js_ajax_chun , 关于CORS跨域资源共享,我也有文章写过, https:/ ...
ajax 原生js操作ajax
一.ajax 1.什么是ajax? ajax是异步javascript与xml,它是多种技术一个集合.可以无刷新状态更新页面. 2.ajax的优缺点: ...
原生ajax如何跨域,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言关于纯js的ajax请求,我之前有文章写过,https://www.haorooms.com/post/js_ajax_chun, 关于CORS跨域资源共享,我也有文章写过,https://ww ...
原声ajax发送post请求,原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 var oStr = ''; var postData = {}; var oAjax = null; //post提交的数据 postData ...
js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
原生js的Ajax实例
与jQuery不同,原生js的ajax的实现相比来说复杂一些,因为jquery中的$.ajax()方法已经把js的实现封装起来,使用起来更加方便.但是,原生js的实现过程,对于理解ajax,好像更清晰 ...

原生js实现ajax

原生js实现ajax相关推荐

最新文章

热门文章