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. oracle查询转换_view merge

    oracle对于子查询的支持做的很好,oracle optimizer会对inline view进行query transfomation,即视图合并,不过也经常带来意想不到的问题.下面是一个inli ...

  2. .Net 调式案例—实验4 高CPU（High CPU）回顾

    原文地址:http://blog.csdn.net/directionofear/article/details/8033506 如果Web应用程序经常遇到的问题按频率排名的话,我觉得 第一名unha ...

  3. 《锋利的Jquery第二版》读书笔记 第二章

    本章节主要Jquery选择器 jquery选择器与css选择器十分相似,特别需要注意的是 <script type="text/javascript"> documen ...

  4. [SAM4N学习笔记]按键程序(查询方式)

    一.准备工作:      将上一节搭建的工程复制一份,命名为"5.key scanf".这一节主要讲如何使用SAM4N的GPIO输入功能,实现按键的输入. 二.程序编写:      ...

  5. （转载）反编译android的apk文件步骤

    下面的方法我已经尝试过,完全可以成功,重点的步骤我在这里说一下 1.必须要有java环境,记得配置好环境变量 2.如果只查看class中的函数文件,只需要下载dex2jar和jd-gui 3.下载地址 ...

  6. 16个最棒的jQuery视差滚动效果教程

    今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...

  7. 关于附件控件隐藏后，在IE下不能上传，报“拒绝访问”

    报错时的使用: @Html.TextBoxFor(m => m.FileName, new { style = "width:457px;", @readonly = &qu ...

  8. 浙大PTA - - 堆中的路径

    题目链接:https://pta.patest.cn/pta/test/1342/exam/4/question/21731 本题即考察最小堆的基本操作: #include "iostrea ...

  9. iOS中SQLite知识点总结2

    数据库(SQLite) 01-多表查询 格式:select 字段1,字段2,... from 表名1,表名2; 别名:select 别名1.字段1 as 字段别名1,别名2.字段2 as 字段别名2, ...

  10. Java 抽象类与接口总结

    一.为什么要使用抽象类?有什么好处? 抽象类是通用接口.不同的子类可以用不同的方法表示此接口.通用接口建立起一种基本形式,以此表示所有子类的共同部分. 必须覆写父类abstract抽象的方法  含有抽 ...