创建XMLHttpRequest对象

一、先来创建XMLHttpRequest对象
在IE、Firefox、safari和Opera中创建该对象的JavaScript代码为：
var xhr = new XMLHttpRequest();
在IE5/6中代码为：
var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
注意，JavaScript区分大小写。

设置异步对象参数并发送请求

二、为XMLHttpRequest对象设置请求参数
1.GET方式
1.1设置参数
xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true);
1.2GET方式请求可以设置浏览器不使用缓存xhr.setRequestHeader("If-Modified-Since", "0");
1.3发送: xhr.send(null);//GET方式
2.POST方式： 1.1设置参数：xhr.open("POST", "GetAreasByAjax.aspx", true); 1.2添加请求头：xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
1.3发送：xhr.send("isAjax=1&na=123");//POST方式

设置回调函数

异步使用XMLHttpRequest对象
异步使用XMLHttpRequest对象时，必须使用：onreadystatechange事件。
使用模式应该是：
创建该对象；-new
设置onreadystatechange事件触发一个回调函数; -onreadystatechagne
打开请求；-open
发送请求；-send
注：在回调函数中检查readyState属性，看数据是否准备就绪(是否等于4)。
如果没有准备好，隔一段时间再次检查。因为数据没有下载完时，我们无法使用它的属性和方法。
如果已经准备好，就继续往下执行；

编写回调函数

1.在xhr.send之前添加设置回调函数代码：
xhr.onreadystatechange = watching;
2.回调函数

 function watching() {

        if (xhr.readyState == 4) {//请求状态

            if (xhr.status == 200) {//服务器返回的状态码

                var msg = xhr.responseText; //服务器返回的字符串

            } else alert("服务器错误!" + ajaxH.status);

        }

 }

判断时注意，要：xhr.readyState == 4&&xhr.status == 200，不要xhr.status == 200&&xhr.readyState == 4

异步对象readyState属性

readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。
0：未初始化。new完后;
1：已打开。对象已经创建并初始化，但还未调用send方法
2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；
3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
4：已加载。所有数据接收完毕

XMLHttpRequest对象属性

一、onreadystatechange属性，设置回调函数。
二、readyState属性，获取当前XMLHttpRequest对象执行的状态：
1> 0表示以创建XMLHttpRequest对象，但是还没有初始化，即没有调用open()方法设置XMLHttpRequest对象。
2>1表示创建了XMLHttpRequest对象，并且调用了open()方法进行初始化，但是还没有调用send()方法。
3>3表示浏览器正在接受服务器的响应数据。
4>所有数据已经被接受完毕。
三、status属性，服务器返回的http状态码。（>=200 and <300、304未修改，读取缓存。都表示成功）
四、statusText属性，服务器返回的状态码对应的友好的文字说明，比如200对应的OK.
五、responseText属性，以字符串方式获取服务器对客户端的响应。
六、responseXml属性，当请求的是一个xml文件时，或者响应头中Content-Type为：text/xml或application/xml时，返回一个XmlDocument对象（Dom节点对象），支持标准的dom的成员，比如：childNodes、documentElement、firstChild、lastChild、nextSibling、nodeName、nodeType、nodeValue、parentNode、doctype等。

XMLHttpRequest对象常用方法

一、open("get","url",true)初始化，如果第三个参数为false,则js等待请求完毕后才会继续执行。
二、setRequestHeader("","")增加http请求头信息。在open()之后，send()之前调用。
三、send(null);发送请求。send()方法的参数表示为在请求报文体中发送的数据内容。为了最大化的浏览器兼容问题，如果没有请求报文体就传递null。get请求没有请求报文体，所以一般为null。使用post请求时才需要设置报文体。
四、getResponseHeader("Content-Type"),根据响应的报文头获得报文内容。
五、getAllResponseHeaders();获取所有的响应报文头内容。
六、abort();取消当前的http请求，取消之后如果要重新发起请求，建议重新创建一个XMLHttpRequest对象。

Ajax使用注意

xhr只能向同一个域中的相同端口号、相同协议的url发起请求，不能跨域,否则会引起错误。
为了浏览器兼容,get请求时最好为send()传递null参数。
在创建了xhr对象后立刻设置onreadystatechange事件，这样就能监视到所有的状态。如果不需要监视其他状态只监视readyState==4的状态则可以在send()之后设置。
get请求时，请求中的QueryString的参数名称与参数值最好使用encodeURIComponent()进行编码。否则在某些浏览器下无法获取该值，比如IE.
post请求时，为了像表单那样提交数据需要设置请求的Content-Type为：application/x-www-form-urlencoded。send("键=值&键=值")
解析json格式时eval("("+json+")")。但有安全性问题。

-》使用post方式提交
需要设置头信息：xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-》如果中文乱码的解决：
在客户端使用window.encodeURIComponent()进行编码
在服务器端使用Server.UrlDecode()进行解码

GetTime.html

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <script>

         window.onload = function () {

             var btnGetTime = document.getElementById('btnGetTime');

             btnGetTime.onclick = function () {

                 var showTime = document.getElementById('showTime');

                 showTime.innerHTML = '<img src="data:images/loading.gif"/>';

                 //1、创建对象

                 var xhr = new XMLHttpRequest();

                 //2、打开连接

                 //xhr.open('get', 'GetTime.ashx?title=xlb', true);

                 xhr.open('post', 'GetTime.ashx');

                 //3、配置

                 xhr.onreadystatechange = function () {

                     //如果成功返回则展示

                     if (xhr.readyState == 4) {//通信成功

                         if (xhr.status == 200) {//服务器成功返回信息

                             showTime.innerHTML = xhr.responseText;

                         }

                     }

                 };

                 //4、发送

                 //xhr.send(null);//当使用get请求时，最好设置为null

                 //以post方式发送请求

                 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                 xhr.send('title=yg');

             };

         };

     </script>

 </head>

 <body>

     <input type="button" id="btnGetTime" value="获取当前时间" />

     <div id="showTime"></div>

 </body>

 </html>

GetTime.ashx

     public class GetTime : IHttpHandler

     {

         public void ProcessRequest(HttpContext context)

         {

             //Thread.Sleep(5000);

             string title = context.Request["title"];

             context.Response.ContentType = "text/plain";

             context.Response.Write(DateTime.Now.ToString() + "_" + title);

         }

         public bool IsReusable

         {

             get

             {

                 return false;

             }

         }

     }

018-AJAX异步请求XMLHttpRequest的更多相关文章

  1. Ajax异步请求XMLHttpRequest对象Get请求

    $(function () { $("#btnGetDate").click(function () { var xhr; //第一步:创建异步请求的核心的对象: if (XMLH ...

  2. jquery Ajax异步请求之session

    写了一个脚本,如下: $(function () { $("#btnVcode").click(function () { var receiveMobile = $(" ...

  3. AJAX异步请求原理和过程

    AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),它不是一种新的编程语言,而是一种使用现有标准的新方法. AJAX 基于 JavaS ...

  4. Ajax异步请求-简单模版

    <script type="text/javascript"> window.onload = function () { document.getElementByI ...

  5. ajax异步请求实例

    1. 问题分析 用户管理显示页面:usermanagement.tpl(也可以说是MVC中的V,即视图) 用户管理数据发送页面:usermanagement.php(也可以说是MVC中的M,即模型) ...

  6. 原生ajax异步请求基础知识

    一.同步交互与异步交互的概念: * 同步交互:客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户不能做任何其他事情(只能等待响应完才能继续其他请求). * 异步交互:客户端向服务器端发送请 ...

  7. maven工程 java 实现文件上传 SSM ajax异步请求上传

    java ssm框架实现文件上传 实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传的文件 首先springmvc的配置文件要配置上传文件解析器: <!- ...

  8. AJAX异步请求,局部刷新

    AJAX异步请求,局部刷新 window.onload=function(){ //dom事件,页面加载完成执行如下函数 doGetObjects(); } function doGetObjects ...

  9. ajax异步请求返回对象

    使用ajax异步请求返回一个对象. java code: @RequestMapping({"getAstSingleWheelImg_bbs"+Constant.JSON}) @ ...

  10. 【坑】前端使用ajax异步请求以后，springMvc拦截器跳转页面无效

    文章目录 前言 `$.ajaxSetup( )` 后记 前言 本文着重解决前后端分离开发的页面调整问题. 笔者,在做一个需求,需要对访问网站,但是没有登录的用户进行拦截,将他们重定向到首页. 很简单的 ...

随机推荐

  1. express链接mysql, 用数据库连接池管理链接

    1.在API的开发当中,数据库的处理显得尤为重要,express 工程 链接mysql数据库有很好的模板可以借鉴. 1.1 创建数据库链接 新建一个DB目录,在DB目录下新建文件 db.js 内容如下 ...

  2. 从urllib2的内存泄露看python的GC python引用计数 对象的引用数 循环引用

    这里会发现上述代码是存在内存泄露,造成的原因就是lz与ow这两个变量存在循环引用,Python 不知道按照什么样的安全次序来调用对象的 __del__() 函数,导致对象始终存活在 gc.garbag ...

  3. a buzzword to refer to modern Web technologies

    https://html.spec.whatwg.org/multipage/introduction.html#is-this-html5? HTML Living Standard — Last ...

  4. 2015年蓝桥杯省赛A组c++第1题

    /* 方程: a^2 + b^2 + c^2 = 1000 这个方程有整数解吗?有:a,b,c=6,8,30 就是一组解. 你能算出另一组合适的解吗? 请填写该解中最小的数字. 注意:你提交的应该是一 ...

  5. Js_protoType_原型

    1.什么是原型? 之前在网上看了好多,各种说法的都有,说的很晦涩,很难理解,我觉得用的多了就会慢慢理解它的意思,总之来说,每个对象都有一个指向它原型,也就是每个对象都有原型. 2.原型有什么用? 原型 ...

  6. Java中包装类型和基本类型的使用场景（什么时候使用包装类型）（转）

    说明:最简单的理解,基本类型有默认值,而包装类型初始为null.然后再根据这两个特性进行分业务使用,在阿里巴巴的规范里所有的POJO类必须使用包装类型,而在本地变量推荐使用基本类型. Java语言提供 ...

  7. mysql from dual插入实现不插入重复记录

    在mysql中插入一或者多条记录的时候,要求某个字段的值唯一,但是该字段没有添加唯一性索引,可用from dual解决. select * from (select '2015080109' a,2 ...

  8. 【生产问题】记还原一个很小的BAK文件，但却花了很长时间，分析过程

    [生产问题]还原一个很小的BAK文件,但却花了很长时间? 关键词:备份时事务日志太大会发生什么?还原时,事务日志太大会怎么办? 1.前提: [1.1]原库数据已经丢失,只有这个bak了 [1.2]ba ...

  9. 设计模式之装饰模式(Decorator)摘录

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/fengbingchun/article/details/29237955 23种GOF设计模式一般分 ...

  10. 用PowerDesigner建立概念模型的问题：不能创建相同字段名的关键字段

    依次点击Tools--->Model Options->Model Settings,在Model Settings中有Data Item组框,取消里面的Unique Code,勾选All ...