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. 用C#中的params关键字实现方法形参个数可变

    个人认为,提供params关键字以实现方法形参个数可变是C#语法的一大优点.在方法形参列表中,数组类型的参数前加params关键字,通常可以在调用方法时代码更加精练. 例如,下面代码: class P ...

  2. XUTils框架的学习（三）

    前面两章说了xutils框架的引入和注解模块的使用和数据库模块的使用,想了解的朋友可以去看看. 前面在说数据库模块的操作的时候是手动创建数据库并保存在asset文件夹里面,再通过I/O将数据库写进应用 ...

  3. Delphi TcxTreeList 节点添加图片

    需要给TcxTreelist的列添加图片,操作如下 1.设置列, 设置Properties为ImageComboBox , 2. 设置Properties -> Items 添加内容 对应的增加 ...

  4. Bash字符串的处理

    # 定义几个变量用于测试目的 FILE_NAME="/usr/local/app/world.txt" TIME_NOW="`date +"%Y%m%d%H%M ...

  5. C#的类成员初始化顺序

    C#的类成员的定义和声明如下 using UnityEngine; using System.Collections; public class TestController : ECControll ...

  6. 5 个在 Linux 中管理文件类型和系统时间的有用命令

    对于想学习 Linux 的初学者来说要适应使用命令行或者终端可能非常困难.由于终端比图形用户界面程序更能帮助用户控制 Linux 系统,我们必须习惯在终端中运行命令.因此为了有效记忆 Linux 不同 ...

  7. hdu 4523 威威猫系列故事——过生日 小模拟

    威威猫系列故事——过生日 Time Limit: 500/200 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Total ...

  8. 记录IOS入门的过程

    先说点私话.再进入正题吧,顺便抒发下情绪.公司传统业务不景气,而互联网正如火如荼,无奈被逼上梁山.開始学起了IOS编程.后来想想闲着也是闲着就学习学习呗.无奈公司确实不希望投入了.不愿意提供苹果电脑. ...

  9. DataGrid缓冲加载数据

    当datagrid的滚动条拉到4/3的时候去加载数据.. public MainWindow() { InitializeComponent(); ; i <= ; i++) { Class1 ...

  10. Android开发之TextView的下划线添加

    如何给TextView添加下划线呢,最近项目中需要这个,于是就用代码添加了下划线功能.主要就是用Paint的setFlags方法来实现,具体如下: ((TextView)mScrollView.fin ...