ajax其本质就是XMLHttpRequest,现在jquery调用异步的方法很方便，但是也不能忘记原生的JS去编写ajax;

需要注意的是，很多人在写的时候喜欢只用XMLHttpRequest对象readyState 值去判断请求状态和结果，而readyState 的值也有不同的说明

当readyState 的值为0的时候，请求还未初始化（还没有调用open()方法）

当readyState 的值为1的时候，请求刚建立，但是还没有发送（还没有调用 Send()方法）。

当readyState 的值为2的时候请求已发送，但是是获取不到XMLHttpRequest对象的响应信息的

当readyState 的值为3和4的时候，XMLHttpRequest已经能获取到响应信息了，当值为3时，请求其实还在处理；但是已经可以获取到信息，只是服务器还没有完成响应的生成。

以下是一个简单的ajax

前端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxTest.aspx.cs" Inherits="WebApplication21.AjaxTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head runat="server">

    <title></title>

    <script type="text/javascript">

        function ajaxRequest(type, prames) {

            var xmlrequest = null;

            if (window.ActiveXObject) {

                xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");

            } else {

                xmlrequest = new XMLHttpRequest();

            }

            if (xmlrequest != null) {

                //alert("1");

                if (type == 1) {

                    xmlrequest.open("Get", "ajaxhandler.ashx", true);

                }

                else {

                    xmlrequest.open("POST", "ajaxhandler.ashx", true);

                }

                xmlrequest.onreadystatechange = function () {

                    if (xmlrequest.status == 200 && xmlrequest.readyState == 4) {

                        alert(xmlrequest.responseText.toString());

                    }

                    //                    else if (xmlrequest.readyState == 2) {

                    //                        alert("请求失败，" + xmlrequest.status + "：" + xmlrequest.responseText);

                    //                    }

                };

                xmlrequest.send(null);

            }

        }

        //以post方式提交

        function PostAjax() {

            ajaxRequest(0);

        }

        //以GET方式提交

        function GetAjax() {

            ajaxRequest(1);

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <a onclick="ajaxRequest(0)">模拟POST提交</a><br />

        <a onclick="ajaxRequest(1)">模拟GET提交</a>

    </div>

    </form>

</body>

</html>

这里的C#代码是写在一般处理程序里面的（后缀为ashx的文件）:

        public void ProcessRequest(HttpContext context)

        {

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

            context.Response.Write(context.Request.RequestType.ToString() + "：Hello World");

            //int type = int.Parse(context.Request["type"].ToString());

            //if (type==1)

            //{

            //    context.Response.Write("GET：Hello World");

            //}

            //else

            //{

            //    context.Response.Write("POST：Hello World");

            //}

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

XMLHttpRequest对象有很多封装好的方法，可以进行请求设置，这里不多说，之所以写这篇博客，之前有人问我有没有用原生的JS写过ajax，之前确实没写过，也就直接说了没有，其实我所知道的和我知道却没写过

也没用过的技术多了去了，不过没写过，不代表我不会写。

使用原生JS编写ajax操作XMLHttpRequst对象的更多相关文章

  1. 使用原生js写ajax

    // 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined") ...

  2. 原生js实现Ajax

    一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...

  3. 原生JS实现Ajax及Ajax的跨域请求

      前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...

  4. 原生JS的Ajax技术

    1.同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待  卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡 ...

  5. 原生js实现ajax与jquery的ajax库，及json

    这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...

  6. 用原生js实现ajax、jsonp

    转载: http://www.cnblogs.com/yangheng/p/6065910.html 一.原生js实现ajax $.ajax({ url: '', type: 'post', data ...

  7. 原生js实现ajax封装

    一.什么是ajax? 定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并 ...

  8. [javascript]原生js实现Ajax

    一.首先看JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataType: '', data: { }, success: function(){ }, err ...

  9. 原生js与jquery操作iframe

    1  原生js获取iframe的window对象 //方法1 document.getElementById('iframeId').contentWindow; //方法2 window.frame ...

随机推荐

  1. XP中IIS“HTTP 500 - 内部服务器错误”解决方法

    我先把主要过程叙述一下,叙述完有每个问题的具体操作方法. 今天我在XP上安装IIS,运行网站出现"HTTP 500 - 内部服务器错误". 打开HTML没有问题,打开ASP文件时就 ...

  2. Android 写文件到手机

    1)// 在手机中创建文件 FileOutputStream phone_outStream =this.openFileOutput("1.txt", Context.MODE_ ...

  3. BZOJ_1001_狼抓兔子_(平面图求最小割+对偶图求最短路)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1001 1001: [BeiJing2006]狼抓兔子 Time Limit: 15 Sec   ...

  4. CLR Profiler 性能分析工具 (转)

    原文地址:http://www.cnblogs.com/kevinlzf/archive/2010/11/12/1876066.html 下载地址:http://www.microsoft.com/e ...

  5. 使用Block来进行页面间的传值

    Block语法 定义Block //定义类型 typedef void (^ReceiveMessageBlock)(NSString *); //申明变量 ReceiveMessageBlock t ...

  6. Codeforces 296C Greg and Array

    数据结构题.个人认为是比较好的数据结构题.题意:给定一个长度为n的数组a,然后给定m个操作序列,每个操作:l, r, x将区间[l, r]内的元素都增加a,然后有k个查询,查询形式是对于操作序列x,y ...

  7. Java中的Stringbuffer类解析

    StringBuffer类和String一样,也用来代表字符串,只是由于StringBuffer的内部实现方式和String不同,所以StringBuffer在进行字符串处理时,不生成新的对象,在内存 ...

  8. jQuery获取鼠标事件源（万能）

    //任意位置 $(document).ready(function(){ $(document).click(function(){ $("#id_").hide(); }); } ...

  9. cas改造随笔

    原http://www.cnblogs.com/hellowood/archive/2010/08/05/1793364.html 键字: sso域名:cas.server.com 登陆地址(spri ...

  10. iOS 7 新版微信 URL 不支持跳转 App Store 的解决方案

    今天早上刚到公司,就收到反馈说公司前端页面的下载按钮在 iOS 7 的微信内置浏览器里面点击无效,经过确认之后,前端代码是正常的,问题出在了微信上,然后谷歌之,原来腾讯在***. 是 BUG 还是刻意 ...