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

原文:原生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: 请求已完成,且响应已就绪

  也就是当请求完成,并且找到页面时,然后才获取服务器上的数据。

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

时间: 2024-11-09 10:08:32

原生AJAX基础讲解及兼容处理的相关文章

原生ajax基础知识笔记

原生ajax基础知识笔记 1.创建 XMLHttpRequest 对象 所有现代浏览器(IE7+.Firefox.Chrome.Safari 以及 Opera)均内建 XMLHttpRequest 对象. 老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveXObject. 代码示例: // Creates a XMLHttpRequest object. var xhr = new XMLHttpRequest(); 兼容浏览器代码示例: var xhr; /

原生AJAX入门讲解(含实例)

相对于jQuery.YUI以及其他一些类库的AJAX封装,原生JS的AJAX显得那么的尴尬,兼容性不好,要记很多的方法属性,调用不便捷,代码臃肿...但我还是想说,原生JS才是最根本最底层的知识(虽然实际项目中我也是以jQuery AJAX为主,为什么?高效!),求木之长者,必固其根本. 什么是AJAX? 它的优点劣势是什么? Asynchronous JavaScript and XML(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.简单的说它是多种技术的组合,目

Ajax基础讲解 1

随着web的不断发展,Ajax的运用越来越普及,但是对很多同学来说Ajax稍微有些难懂,今天呢就简单给大家讲解一下Ajax的一些基础入门的知识,希望可以帮到刚学习Ajax的同学. 第一步:首先就是服务器的搭建,关于服务器呢不同的人有不同的需求,刚学的人就不要考虑到底用哪个服务器好了,根据每个人的技术不同服务器也不同,新手就随便弄一个可以用的就可以了,我用的是WampServer这个,比较好安装,用于自己写的页面足够了,没有服务器的同学如果想用,可以在下面给我留言,我看到会给你发送过去的:(另外多

原生ajax基础

/*ajax对象的成员常用属性:responseText:以字符串形式接收服务器端返回的信息responseXML:以Xml Document对象形式接收服务器返回的信息readyState:返回当前请求的状态0:刚创建ajax对象1:已经调用open方法2:已经调用send方法3:已经返回部分数据4:请求完成,数据返回完整onreadystatechange:事件,当ajax状态readyState发生变化的时候要触发执行[为了获得较多的状态,最好在创建好ajax对象后就设置最多可以感知1/2

【Java EE 学习第31天】【JavaScript基础增强】【Ajax基础】【Json基础】

一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使用,所以不推荐使用,最好使用open方法弹窗. (2)open方法. (3)open方法弹窗实例. Base.html文档: <!DOCTYPE html> <html> <head> <title>Base.html</title> <met

【转】Javascript原生Ajax请求

什么是 ajaxajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 http 请求的方法(GET 和 POST). GET 用于获取数据.GET 是在 URL 中传递数据,它的安全性低,容量低. POST 用于上传数据.POST 安全性一般,容量几乎无限. ajax 请求 ajax 请求一般分成 4 个步骤. 1.创建 ajax 对象 在创建对象时,有兼容问题: var o

【javascript】ajax 基础 --本文转载

[javascript]ajax 基础 什么是 ajax ajax 即"Asynchronous JavaScript and XML"(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 http 请求的方法(GET 和 POST). GET 用于获取数据.GET 是在 URL 中传递数据,它的安全性低,容量低. POST 用于上传数据.POST 安全性一般,容量几乎无限. ajax 请求 ajax 请求一般分成 4 个步骤. 1.创建 a

JavaScript的原生Ajax解析

通过JavaScript的Ajax进行详细的解析过程,从而更好的了解Jquery的Ajax. 顺带,我会在后面把我整理的一整套CSS3,PHP,MYSQL的开发的笔记打包放到百度云,有需要可以直接去百度云下载,这样以后你们开发就可以直接翻笔记不用百度搜那么麻烦了.  笔记链接:http://pan.baidu.com/s/1qYdQdKK 密码:pvj2   一.JavaScript原生ajax1.原生ajax代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

AJAX 基础知识

AJAX 基础知识 一.AJAX综述 1.AJAX的概念 A:异步asynchronousJ:JavaScriptA:andX:XML 异步的JavaScript和XML. 2.AJAX的优点(好处) 1),提高用户体验度  2),JS与服务端的交互  3),页面局部刷新--提高浏览器的效率 2.AJAX的缺点(弊端)    加大服务器的负担 注:新思想,老技术. 二.实现AJAX功能 (一).JS实现AJAX功能 1.获得XMLHttpRequest(浏览器的兼容) (二).JQuery实现A