Ajax(异步JavaScript和XML)

  ajax主要用于异步加载页面,可以使用户在不刷新页面的情况下进行更新。

  ajax的主要优势是对页面的请求以异步的方式发送到服务器。而服务器不会再用整个页面来响应请求,它会在后台来处理请求,与此同时,用户可以继续与页面进行交互。你的脚本也可以按需加载和创建页面内容,而不会打断用户的浏览体验。

1.XMLHttpRequest对象

  Ajax的核心技术就是XMLHttpRequest对象。这个对象充当着服务器与浏览器脚本之间的中间人的角色。

  但不同浏览器实现XMLHttpRequest对象的方式也不同,所以我们要为其写一个兼容的js。

  在IE浏览器中创建XMLHttpRequest对象,而且要注意,不同的IE浏览器使用的XMLHTTP对象也一样,为了兼容所有的对象,代码如下:

  function getHTTPObject(){

    if(typeof XMLHttpRequest == "undefined"){

      XMLHttpRequest = function(){

        try{ return new ActiveXObject("Msxml.XMLHTTP.6.0");}

          catch(e){}

        try{ return new ActiveXObject("Msxml.XMLHTTP.3.0");}

          catch(e){}

        try{ return new ActiveXObject("Msxml.XMLHTTP");}

          catch(e){}

        return false;

      }   

    }

    return new XMLHttpRequest;

  }  

如果想要使用XMLHttpRequest对象,直接赋值给一个变量就行了:var request = getHTTPObject();

XMLHttpRequest对象有许多方法,其中最有效的是open方法:

function getNewContent(){

  var request = getHTTPObject();

  if(request) {
    request.open("GET","example.txt",true);

    request.onreadystatechange = function(){

      if(request.readyState == 4){

        var oDiv = document.createElement("div");

        oDiv.innerHTML = request.responseText;

        document.getElementsByTagName("body")[0].appendChild(oDiv);

      }

    }

    request.send(null);

  }else{

    alert("对不起,你的浏览器不支持XMLHttpRequest");

  }

}

getNewContent();

open方法的三个参数分别是:指定请求类型GET,POST,SEND;获取文件的路径;指定请求是否异步。

onreadystatechange 是一个事件处理函数,在服务器给XMLHttpRequest对象送回相应的时候触发。

readyState 是服务器给XMLHttpRequest发回响应时,XMLHttpRequest的一个属性,浏览器再不同阶段更新readyState 的值:

0:表示未初始化;

1:表示正在加载;

2:表示加载完毕;

3:表示正在交互;

4:表示完成;

responseText用于保存从服务器返回的数据,格式为String类型;

在制定了请求目标,也明确了如何处理响应后,就可以用send方法发送请求了:

request.send(null);

关于AJAX的更多相关文章

  1. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  2. Ajax及跨域

    概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...

  3. 一个粗心的Bug,JSON格式不规范导致AJAX错误

    一.事件回放  今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...

  4. ABP文档 - Javascript Api - AJAX

    本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...

  5. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  6. 调用AJAX做登陆和注册

    先建立一个页面来检测一下我们建立的用户名能不能用,看一下有没有已经存在的用户名吗 可以通过ajax提示一下 $("#uid").blur(function(){ //取用户名 va ...

  7. Ajax 概念 分析 举例

    Ajax是结合了访问数据库,数据访问,Jquery 可以做页面局部刷新或者说是页面不刷新,我可以让页面不刷新,仅仅是数据的刷新,没有频繁的刷页面,是现在比较常用的一种方式做页面那么它是怎么实现页面无刷 ...

  8. ajax

    常见的HTTP状态码状态码:200 请求成功.一般用于GET和POST方法 OK301 资源移动.所请求资源移动到新的URL,浏览器自动跳转到新的URL Moved Permanently304 未修 ...

  9. 学习笔记之MVC级联及Ajax操作

    由于刚转型到MVC,MVC的架构模式很多不是很清楚,比如今天就想做个级联的操作,因为之前的ASP.NET的方式是通过:控件-->添加事件-->后台编写级联事件进行触发,但是这个MVC就不同 ...

  10. javascript表单的Ajax 提交插件的使用

    Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...

随机推荐

  1. android-----test------模拟来电提醒和短信提醒

    为了测试应用是否能处理来电提醒和短信提醒时正常处理,我们需要做个测试,怎么模拟来电提醒和短信提醒呢?? 采用Telnet 命令来模拟. 1.首先看看Telnet 命令是否可以使用,如果不可以使用,则需 ...

  2. jQuery validate兼容IE8写法

    最近做项目的时候遇到一个validate插件在IE8下面点击submit按钮没有执行检查的BUG 在chrome和FF,还有IE9以上都可以.百度了好多文章都没有找到解决方法,后面自己测试找到了问题. ...

  3. 获取访问者的IP

    import java.io.Serializable; import java.net.InetAddress; import java.net.UnknownHostException; impo ...

  4. leetcode 172

    172. Factorial Trailing Zeroes Given an integer n, return the number of trailing zeroes in n!. Note: ...

  5. mysql 导出csv

    SELECT order_id,product_name,qty FROM ordersINTO OUTFILE '/tmp/orders.csv'FIELDS TERMINATED BY ','EN ...

  6. Generate transparent shape on image

    Here is an example code to generate transparent shape on image. Need to pay attention can not use cv ...

  7. Support Vector Machine (2) : Sequential Minimal Optimization

    目录 Support Vector Machine (1) : 简单SVM原理 Support Vector Machine (2) : Sequential Minimal Optimization ...

  8. PHP禁止同一IP频繁访问以防止网站被防攻击或采集的代码

    PHP禁止同一IP频繁访问以防止网站被防攻击或采集的代码 <?php /* *通过禁止IP频繁访问防止网站被防攻击代码*design by www.scutephp.com*/header('C ...

  9. 查询数据库最大id加1

    SELECT ISNULL(MAX(id),0)+1 AS MaxId FROM TABLE ISNULL(MAX(id),0) 就是如果id为空 就返回0,然后再加1

  10. javascript对象引用与赋值

    avascript对象引用与赋值 <script type="text/javascript"> //例子一: 引用 var myArrayRef = new Arra ...