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

随机推荐

Python3 栈的实现
这篇博客主要记录我在学习python算法时实现栈的过程,这里栈的实现只是最简单的实现,其中也包括符号匹配,前缀.中缀以及后缀表达式的实例.参考书目为: problem-solving-with-alg ...
Matlab中图论工具箱的应用
Matlab图论工具箱的命令见表1 表1 matlab图论工具箱的相关命令命令名功能 graphallshortestpaths 求图中所有顶点对之间的最短距离 graphconncomp 找无 ...
【翻译】我如何使用CSS来制作bitsofcode Logo动画
翻译文章,翻译不好,还望大家指出原文地址:How I Animated the bitsofcode Logo with CSS 我是css动画的新手,这样说是因为我只在有限的案例中使用过他们,而且 ...
JSP基础使用
一.JSP简介 JSP(Java Sever Pages):是为了能让 Java 在 Web 页面运行的一种语言. 在JSP中包括两种主要内容: 1. HTML.JS语言(静态内容).由客户端浏览器负 ...
分享：Python中的位运算符
按位运算符是把数字看作二进制来进行计算的.用的不太多,简单了解. 下表中变量 a 为 60,b 为 13二进制格式如下: a = 0011 1100 b = 0000 1101 a&b = 0 ...
Java中从键盘输入的三种方法
import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...
SDK编程之多线程编程
本课中,我们将学习如何进行多线程编程.另外我们还将学习如何在不同的线程间进行通信. 理论:前一课中,我们学习了进程,其中讲到每一个进程至少要有一个主线程.这个线程其实是进程执行的一条线索,除此主线程外 ...
ADO.NET通用类库
using System.Data; using System.Data.SqlClient; namespace DataService { public class SQLHelper { pub ...
SpringBoot简单连接数据库以及查询数据
实现大概思路:配置数据库环境-->实体类-->新建**Repostory接口并且继承JpaRepository-->配置URL映射以及请求方式- 首先,在数据库中新建名称为dbgir ...
java线程池技术(二)：核心ThreadPoolExecutor介绍
版权声明:本文出自汪磊的博客,转载请务必注明出处. Java线程池技术属于比较"古老"而又比较基础的技术了,本篇博客主要作用是个人技术梳理,没什么新玩意. 一.Java线程池技术的 ...

原生态的ajax代码

二：解析

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

随机推荐

热门专题