<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

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代码的更多相关文章

.net学习之Session、Cookie、手写Ajax代码以及请求流程
1.IIS 7 以上版本集成了两种模式,一种是经典模式,一种是集成模式(直接将asp.net框架集成到IIS中) 2.浏览器和服务器端通过什么技术来实现的?Socket(套接字),通信的语法是HTTP ...
Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码附:原生js的Ajax代码其中有json的一句话解释
前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function( ...
原生Ajax代码实现
Ajax Asynchronous JavaScript And XML 异步: 指一段程序执行时不会阻塞其他程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序 ,相反的则为同步, 自己 ...
向后台提交数据：通过form表单提交数据需刷新网页但通过Ajax提交数据不用刷新网页可通过原生态Ajax或jqueryAjax。Ajax代码部分
原生态Ajax提交表单:需要借助XMLHttpRequest对象的open,要收通过post发送请求还要setRequsetHeader,然后把数据发送给后端,代码如下目录结构 index.py代码 ...
Ajax代码简单封装。
function ajax(url, onsuccess, onfail) { var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest( ...
一些ajax代码
$.ajax({ type : "get", url : "list_hot_ajax.json", data : {"provinceId" ...
jQuery 1.9 Ajax代码带注释
/* -----------ajax模块开始 -----------*/ var // Document location ajaxLocParts, ajaxLocation, ajax_nonce ...
数据交互 ajax代码整理
请求列表通用 /** **加载对应的试卷套题 ** */ function loadQuestions(){ var businessSubClass = { pageNo:pageNo, pageS ...
不依赖JQuery的入门Ajax代码
今天看了head first ajax这本书里ajax的实例,讲的很好,这本书觉着很不错,推荐下. Ajax (Asynchronous Javascript and XML)即异步Javascrip ...

随机推荐

51NOD 1821 最优集合 [并查集]
传送门题意: 一个集合S的优美值定义为:最大的x,满足对于任意i∈[1,x],都存在一个S的子集S',使得S'中元素之和为i. 给定n个集合,对于每一次询问,指定一个集合S1和一个集合S2,以及一个 ...
BZOJ 1018: [SHOI2008]堵塞的交通traffic [线段树区间信息]
1018: [SHOI2008]堵塞的交通traffic Time Limit: 3 Sec Memory Limit: 162 MBSubmit: 3064 Solved: 1027[Submi ...
H5动画
1.参考:http://blog.csdn.net/whqet/article/details/42911059?readlog https://developer.mozilla.org/zh-CN ...
qt的编译
cp qt-everywhere-opensource-src-5.5.0.tar.gz /opt/qt/2.1 解压qt源码 sudo tar xzf qt-everywhere-opensourc ...
ubuntu的网络配置
1,检查网络是否通畅 ping www.baidu.com 2,检查网线是否插好 3,使用ifconfig查看当前活跃网络接口 ifconfig 4,配置IP地址.子网掩码.网关地址 sudo vi ...
WEB-INF目录下文件复制的几种方式
2018年1月31日 10:42:55 工作完写点博客记录下. 需求:从web-inf下拷贝文件到指定目录. 目录结构直接贴代码第一种方式,字节流读取 try { int index = 0; S ...
【Tools】ubuntu无法virtualenv创建python虚拟环境的解决
刚有人问我Ubuntu python虚拟环境无法创建问题,报错same file error,防止今后遇到忘记,记录下可能的问题. 1.先在windows上试了下: pip install virtu ...
yum出问题啦
BUG 不小心把/usr/local上的一堆文件(夹)给删除了,于是乎,一堆问题冒出来了 loading mirror speeds from cached hostfile 解决方法一定要执行 y ...
win7局域网共享文件
调整共享文件所在电脑设置: 1. 关闭防火墙 2. 更改网络设置 ①打开网络和共享中心 ②进入"选择家庭组和共享选项" ③进入"更改高级共享设置" ④调整设置并 ...
unbuntu 系统登录华南师范大学校园网的方法
最近刚装了unbuntu 系统,刚开始网络连接遇到了点小问题,原来是校园网不知道怎么认证,于是向好基友请教了下,得出快捷的方法如下: 下载学校网络的认证客户端,记住位置,一般都是默认下载地址是 Dow ...

原生态的ajax代码

二：解析

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

随机推荐

热门专题