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. 【HDOJ】2159 FATE

    DP+贪心优化. #include <stdio.h> #include <stdlib.h> #include <string.h> #define MAXNUM ...

  2. linux上TCP connection timeout的原因查找

    linux上TCP connection timeout的原因查找 好久没有写文章了, 今天解决了一个网络连接超时的问题, 记录以备查看. 最近在线上nginx经常出现输出connection tim ...

  3. IIS短文件漏洞修复

    近期网站系统被扫描出漏洞:IIS短文件/文件夹漏洞 漏洞级别:中危漏洞 漏洞地址:全网站 漏洞描述:IIS短文件名泄露漏洞,IIS上实现上存在文件枚举漏洞,攻击者可利用此漏洞枚举获取服务器根目录中的文 ...

  4. SWFUpload无刷新文件批量上传

    一.首先将SWFUpload所有文件加入项目中,如图

  5. wxWidgets学习笔记——在屏幕上画简单的图形和文字

    在屏幕上画简单图形和显示图片.处理简单鼠标键盘事件 /*************************************************************** * Name: M ...

  6. JAVA虚拟机简介

    Java虚拟机定义 Java虚拟机有多层含义 一套规范:Java虚拟机规范.定义概念上Java虚拟机的行为表现 一种实现:例如HotSpot,J9,JRockit.需要实现JVM规范,但具体实现方式不 ...

  7. 4 weekend110的YARN的通用性意义 + yarn的job提交流程

    Mr程序写完之后,提交给yarn,yarn会产生一个MRAppMaster,想说的是,yarn变得很 通用,yarn集群上,不光可以跑mr程序,还可以跑各种运算模型. 海量批处理,mapreduce ...

  8. 【转】漫谈ANN(2)：BP神经网络

    上一次我们讲了M-P模型,它实际上就是对单个神经元的一种建模,还不足以模拟人脑神经系统的功能.由这些人工神经元构建出来的网络,才能够具有学习.联想.记忆和模式识别的能力.BP网络就是一种简单的人工神经 ...

  9. 【转】[精华] 跟我一起写 Makefile

    陈皓 概述  —— 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和professional的程序员,m ...

  10. Shell函数：Shell函数返回值、删除函数、在终端调用函数

    函数可以让我们将一个复杂功能划分成若干模块,让程序结构更加清晰,代码重复利用率更高.像其他编程语言一样,Shell 也支持函数.Shell 函数必须先定义后使用. Shell 函数的定义格式如下: f ...