<script type="text/javascript">
         var xmlhttprequest;
         function GetXmlHttpRequest() {
             if (window.ActiveXObject) {
                 try
                 {
                     //适用于IE5 IE6
                     xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
                 }
                 catch(e)
                 {
                     //适用于IE7 以上版本
                     xmlhttprequest=new ActiveXObject("Msxml2.XMLHTTP");
                 }
             }
             if(window.XMLHttpRequest)
             {
                    //适用于所有的浏览器
                    xmlhttprequest=new XMLHttpRequest();
             }
             else
             {
                 alert("对不起，您的浏览器不适用于AJAX");
             }
         }

         //执行操作
         function Operate() {
         {

             //先获取xmlhttprequest
             GetXmlHttpRequest();

             //POST传值

             //open方法（指定数据发送方式，处理页面，是否异步）创建一个新的http请求，并指定此请求的方法、URL以及验证等信息
             xmlhttprequest.open("POST", "DoOperate.ashx",true);

             //setRequestHeader(header, value)方法单独设定某个请求的HTTP头信息
             xmlhttprequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

             //状态发生事件（onreadyStateChange事件是在readyState属性发生改变时触发）
             xmlhttprequest.onreadystatechange=WatchChange;

             //发送数据
             xmlhttprequest.send("id=1001&name=holyknihgt");

             //GET传值【如果是POST传值需要设定RequestHeader，而Get传值不需要】
             //xmlhttprequest.open("Get", "DoOperate.ashx",true);

             //xmlhttprequest.send(null);
         }

         //状态监听
         function WatchChange()
         {
             //readyState
             //0:send方法还没有被调用
             //1:已经调用了send方法，请求还在处理
             //2:send方法已完成 整个应答已接收
             //3:正在解析应答
             //4:应答解析完成

             //status
             //200:表示交互成功
             //404：NOT Found
             //500：服务器内部错误
              && xmlhttprequest.status==)
             {
                 //或许响应值
                 var result = xmlhttprequest.responseText;
                 //将响应值以‘，’分割
                 result = result.split(',');
                 //给id为resultMsg的控件赋值
                 document.getElementById(]+];
             }
         }
     </script>
 </head>
 <body>
     <form id="form1" runat="server">
     <div>
         <div id="resultMsg"></div>
         <input type="button" value="调用AJAX" onclick="Operate();" />
     </div>
     </form>
 </body>
 </html>

二：解析

步骤：

1：首先判断浏览器支不支持ajax

function GetXmlHttpRequest() {
if (window.ActiveXObject) {
try
{
//适用于IE5 IE6
xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
//适用于IE7 以上版本
xmlhttprequest=new ActiveXObject("Msxml2.XMLHTTP");
}
}
if(window.XMLHttpRequest)
{
//适用于所有的浏览器
xmlhttprequest=new XMLHttpRequest();
}
else
{
alert("对不起，您的浏览器不适用于AJAX");
}
}

2，post 或者get传值，

假如是post的话则需要设置http头信息

//open方法（指定数据发送方式，处理页面，是否异步）创建一个新的http请求，并指定此请求的方法、URL以及验证等信息
xmlhttprequest.open("POST", "DoOperate.ashx",true);

//setRequestHeader(header, value)方法单独设定某个请求的HTTP头信息
xmlhttprequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

假如是get请求的话不需要设置头信息

//GET传值【如果是POST传值需要设定RequestHeader，而Get传值不需要】
//xmlhttprequest.open("Get", "DoOperate.ashx",true);

3，监听器并发送数据

xmlhttprequest.onreadystatechange=WatchChange;

//发送数据
xmlhttprequest.send("id=1001&name=holyknihgt")

在这可以更好的理解回调函数，就是在这最开始的时候只是放了一个函数在这，其实只是一种形式在这，函数会接着往下走，甚至还会把下面的代码的参数回填到上面的WatchChange方法中来。

假如是get请求的话

发送的数据是null

//xmlhttprequest.send(null);

4，监听器的内容

function WatchChange()
{
//readyState
//0:send方法还没有被调用
//1:已经调用了send方法，请求还在处理
//2:send方法已完成 整个应答已接收
//3:正在解析应答
//4:应答解析完成

//status
//200:表示交互成功
//404：NOT Found
//500：服务器内部错误
if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200)
{
//或许响应值
var result = xmlhttprequest.responseText;
//将响应值以‘，’分割
result = result.split(',');
//给id为resultMsg的控件赋值
document.getElementById("resultMsg").innerHTML = "ID:"+result[0]+" Name:"+result[1];
}
}

原生态的ajax代码的更多相关文章

  1. .net学习之Session、Cookie、手写Ajax代码以及请求流程

    1.IIS 7 以上版本集成了两种模式,一种是经典模式,一种是集成模式(直接将asp.net框架集成到IIS中) 2.浏览器和服务器端通过什么技术来实现的?Socket(套接字),通信的语法是HTTP ...

  2. Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码 其中有json的一句话解释

    前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function( ...

  3. 原生Ajax代码实现

    Ajax Asynchronous JavaScript And XML   异步: 指一段程序执行时不会阻塞其他程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序 ,相反的则为同步, 自己 ...

  4. 向后台提交数据：通过form表单提交数据需刷新网页 但通过Ajax提交数据不用刷新网页可通过原生态Ajax或jqueryAjax。Ajax代码部分

    原生态Ajax提交表单:需要借助XMLHttpRequest对象的open,要收通过post发送请求还要setRequsetHeader,然后把数据发送给后端,代码如下 目录结构 index.py代码 ...

  5. Ajax代码简单封装。

    function ajax(url, onsuccess, onfail) {    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest( ...

  6. 一些ajax代码

    $.ajax({ type : "get", url : "list_hot_ajax.json", data : {"provinceId" ...

  7. jQuery 1.9 Ajax代码带注释

    /* -----------ajax模块开始 -----------*/ var // Document location ajaxLocParts, ajaxLocation, ajax_nonce ...

  8. 数据交互 ajax代码整理

    请求列表通用 /** **加载对应的试卷套题 ** */ function loadQuestions(){ var businessSubClass = { pageNo:pageNo, pageS ...

  9. 不依赖JQuery的入门Ajax代码

    今天看了head first ajax这本书里ajax的实例,讲的很好,这本书觉着很不错,推荐下. Ajax (Asynchronous Javascript and XML)即异步Javascrip ...

随机推荐

  1. BZOJ 2286: [Sdoi2011消耗战 [DP 虚树]

    传送门 题意: 删除价值和最小的边使得$1$号点与$k$个关键点不连通 一个树形DP...但是询问多次,保证总的关键点数为$O(n)$ 先说一下这个$DP$ $f[i]$表示子树$i$中的关键点与$1 ...

  2. CSA单点登录环境配置

    本篇先写一些基础 今天看到一个cas单点登录的源码,搞环境就废了大半时间 <SSO CAS单点系列>http://www.imooc.com/article/3576 参考了这篇博客里的配 ...

  3. 同步博客—CSDN推广

    niiickのCSDN 用CSDN也有几个月了 其实一开始有人让我转到博客园我是拒绝的 (毕竟强迫症接受不了一边博客只有一半= =) 不过最近有幸观赏了某位dalao的博客园 发现没有广告好棒!!!设 ...

  4. （一）《Maven实战》读书笔记 —— Maven简介

    第一章:Maven简介 一.何为Maven? Maven这个词可以翻译为"知识的积累",本书将介绍Maven这一跨平台的项目管理工具.作为Apache组织中的一个个颇为成功的开源项 ...

  5. According to TLD or attribute directive in tag file, attribute value does not accept any expressions报错解决办法

    1.出现原因: 导入的uri由于不是正确的导致这个jstl不支持el的表达式 jstl uri导入错误:   <%@ taglib prefix="c" uri=" ...

  6. slf4j-logback 日志以json格式导入ELK

    同事整理的,在此分享.logback,log4j2 等slf4j的日志实现都可以以json格式输出日志, 这里采用的是logback.当然也可以以文本行的格式输出,然后在logstash里通过grok ...

  7. nxlog4go Log Levels and Pattern Layout

    Log levels nxlog4go provides log levels as below: type Level int const ( FINEST Level = iota FINE DE ...

  8. Https访问

    Let's Encrypt是很火的一个免费SSL证书发行项目,自动化发行证书,证书有90天的有效期.适合个人使用或者临时使用,不用再忍受自签发证书不受浏览器信赖的提示.去年VPS侦探曾经说过Let's ...

  9. dubbox系列【一】——dubbox简介

    1.dubbox是什么? dubbox是当当网开源的开源分布式服务框架,基于阿里巴巴dubbo. 1个框架 + 2个方案:分布式服务框架 + RPC远程调用方案 + SOA服务治理方案. 2.dubb ...

  10. 高性能JavaScript读书笔记

    零.组织结构 根据引言,作者将全书划分为四个部分: 一.页面加载js的最佳方式(开发前准备) 二.改善js代码的编程技巧(开发中) 三.构建与部署(发布) 四.发布后性能检测与问题追踪(线上问题优化) ...