<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 ...

随机推荐

BZOJ 3105: [cqoi2013]新Nim游戏 [高斯消元XOR 线性基]
以后我也要用传送门! 题意:一些数,选择一个权值最大的异或和不为0的集合终于有点明白线性基是什么了...等会再整理求一个权值最大的线性无关子集线性无关子集满足拟阵的性质,贪心选择权值最大的,用高 ...
vue2.0实现前端星星评分功能组件
<template id="pingJia"> <div> <ul> <li :class="{li1:1,bg1:index% ...
输入url到渲染出页面的过程
输入地址浏览器查找域名的 IP 地址这一步包括 DNS 具体的查找过程,包括:浏览器缓存->系统缓存->路由器缓存... 浏览器向 web 服务器发送一个 HTTP 请求服务器的永久 ...
Docker镜像管理
镜像是docker的三大核心概念之一.可以用来创建容器. Docker的镜像实际上由一层一层的文件系统组成,这种层级的文件系统被称为UnionFS.镜像可以基于Dockerfile构建,Dockerf ...
springMvc+swagger整合例子
Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模型紧密集成到服 ...
s5pv210 的启动
1.开发板已启动从0x0获取数据(内部64k的硬盘,里面含有三星固化的BL0段代码),将其读到a8软核中,进行运算,主要用于初始化时钟,96k的内部IRAM.并负责指定启动设备(通常为外部硬盘),从 ...
LeetCode - 626. Exchange Seats
Mary is a teacher in a middle school and she has a table seat storing students' names and their corr ...
jQuery中animate()方法用法实例
本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...
PLECS—直流电机系统2
1.模型图 2,计算及仿真 1)计算 2)仿真 n = 1870.1 r/min (wm = 195.833 rad/s) ...
angular2 localStorage的使用
最近从ng1 转ng2 相信使用ng1的同学都知道 ngStorage 这个插件吧, 存储本地数据下面介绍一下 ng2 使用 localStorage 参考 github https ...

原生态的ajax代码

二：解析

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

随机推荐

热门专题