原生AJAX基础讲解及兼容处理

简介:
AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML)。
  AJAX不是新技术 ,但却是热门的技术。它可以在不重载(刷新)整个页面的情况下与服务器进行数据交互并更新网页模块。
  AJAX的优点有很多:可以局部刷新、按需加载,这样就减轻了服务器的数据流量。并且在页面更新的同时,用户可以浏览器网页的其它内容而不受影响,也减轻了结构负担。AJAX也不是万能的,在有以上优点的同时SEO也受到了影响。
  在学习AJAX之前,必须先有HTML/XHTML、CSS、JavaScript/DOM的基础。
  AJAX与服务器进行数据交互,必然涉及到服务器端,与此同时也就涉及到了服务器请求对象的创建(new XMLHttpRequest())、确认请求方式(open())、发送请求(send())以及响应请求(responseText)。
   创建对象:
  IE9+及其它浏览器支持使用new XMLHttpRequest()的创建对象方式,而IE8及以下则使用new ActiveXObject()的方式进行创建。
  看了网上许多人使用如下代码进行兼容:
1 try {
2     xml = new ActiveXObject("Msxml2.XMLHTTP");
3 } catch(e) {
4     try {
5         xml = new ActiveXObject("Microsoft.XMLHTTP");
6     } catch(e1) {
7         xml = new XMLHttpRequest();
8     }
9 }
  笔者用IE11调试功能测试IE10及以下不写new ActiveXObject("Msxml2.XMLHTTP")也是没问题的,于是在创建对象时可以使用代码:
  var xml = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
   确认请求:
  xml.open('get', 'url', true/false);
  第一个参数表示:string. 访问方式,有两具值:get/post,大部分的时候使用get
  第二个参数表示:string. 要连接的服务器网址
  第三个参数表示:boolean. 表示是否需要异步请求(true为发起异步加载)
   发送请求:
  xml.send();
  如果需要发送数据则采用xml.send(str);
   响应数据:
  xml.onreadystatechange = function() {
  if (xml.readyState == 4 && xml.status == 200) {
  alert(xml.responseText);
  }
  }
  status返回链接的状态,一般返回200与404,200表示成功返回,404表示未找到页面。
  readyState有5个值,分别为:0、1、2、3、4。而每当值改变时都会触发一次onreadystatechange。
  readyState的5个值含义分别为:
  0: 请求未初始化
  1: 服务器连接已建立
  2: 请求已接收
  3: 请求处理中
  4: 请求已完成,且响应已就绪
  也就是当请求完成,并且找到页面时,然后才获取服务器上的数据。

最新内容请见作者的GitHub页:http://qaseven.github.io/
相关文章
|
4月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
7月前
|
前端开发
Ajax的原生写法
Ajax的原生写法
|
3月前
|
JSON 前端开发 JavaScript
原生 AJAX 详解
原生 AJAX 详解
44 0
|
9月前
|
XML 前端开发 JavaScript
原生ajax
ajax的概念:Ajax即Asynchronous Javascript And XML(异步JavaScript和XML),实际上就是前端js语言与后端交互的手段
|
4月前
|
前端开发 JavaScript API
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
|
4月前
|
存储 移动开发 JavaScript
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
|
4月前
|
XML 缓存 JavaScript
jQuery 第十章(jQuery AJAX以及jQuery和其他框架兼容)
jQuery 第十章(jQuery AJAX以及jQuery和其他框架兼容)
26 0
|
5月前
|
前端开发
一篇,让你会写原生ajax
一篇,让你会写原生ajax
31 0
|
5月前
|
JavaScript 前端开发
原生js实现ajax请求带请求头header
原生js实现ajax请求带请求头header
|
5月前
|
JavaScript 前端开发
js实现原生ajax
js实现原生ajax
195 0