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. How to: Use a Custom User Name and Password Validator

    在wcf中使用自定义的用户名和密码验证方式 https://msdn.microsoft.com/en-us/library/aa702565.aspx http://www.codeproject. ...

  2. C 语言字符串(译)

    C 语言的 switch 语句非常强大.然而,它不能用字符串作为判断条件,只能用常整数.这是可以理解的,因为 C 的字符串仅仅是数组,它们并不是并不是一个整体. 在某些情况下,将 string 作为 ...

  3. Vijos_1792_摆花_(动态规划,多重集组合数)

    描述 https://vijos.org/p/1792 共n种花,第i种花有a[i]个,要摆m个,同一种花连续且花按照序号从小到大排,问共有多少种摆花方案.   描述 小明的花店新开张,为了吸引顾客, ...

  4. How to make project not set to be build

    1.BUILD->Configuration Management... 2. When you guys add new projects to the kiosk solution plea ...

  5. Ora-12154:无法解析连接字符串

    服务器的环境为: 系统:Windows server 2008 64位 数据库:Oracle 10g WEB应用服务:IIS 7.0+.Net Framework 4.0 解决方法 Toad for ...

  6. HDOJ/HDU 1113 Word Amalgamation(字典顺序~Map)

    Problem Description In millions of newspapers across the United States there is a word game called J ...

  7. JavaScript高级程序设计29.pdf

    insertAdjacentHTML方法 插入标记最后一个新增的方式是insertAdjacentHTML()方法,它接收两个参数:插入位置和要插入的HTML文本,第一个参数必须是下列值之一: &qu ...

  8. Axure RP 8.0 中继器初体验

    为了解决增删等复杂交互的问题,中继器是个不错的选择. 拖拽出一个默认的中继器 中继器的数据集感觉就像是数据库一样,在右边检视窗口中可以看到中继器的默认数据集,可以理解成一张二维表.默认有1列,现成的3 ...

  9. 修复直接删除linux系统后grub丢失错误

    如果删除了系统后,grub丢失,开机出现“grub>”的话,可以用如下代码进入目标linux系统:grub>ls (hd0,X)/boot             //x为目标系统所在分区 ...

  10. Python默认编码错误SyntaxError: Non-ASCII character '\xe5'之解决方法

    在编写Python时,当使用中文输出或注释时运行脚本,会提示错误信息: SyntaxError: Non-ASCII character '\xe5' in file ******* 解决方法: py ...