原生态的ajax代码
<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代码的更多相关文章
- .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 4129: Haruna’s Breakfast [树上莫队 分块]
传送门 题意: 单点修改,求一条链的mex 分块维护权值,$O(1)$修改$O(S)$求mex...... 带修改树上莫队 #include <iostream> #include < ...
- 用 label 控制 Pod 的位置 - 每天5分钟玩转 Docker 容器技术（128）
默认配置下,Scheduler 会将 Pod 调度到所有可用的 Node.不过有些情况我们希望将 Pod 部署到指定的 Node,比如将有大量磁盘 I/O 的 Pod 部署到配置了 SSD 的 Nod ...
- RDB持久化
redis是一个内存数据库,所有我们需要将他定时存在磁盘上,如果没有开启AOF,那么会生成RDB文件进行存储,其实就是个二进制文件 RBD文件通过SAVE BGSAVE进行创建, SAVE会阻塞服务器 ...
- uboot之位置无关代码解析
在之前的话 新年过去了,那么久没有好好学习,感觉好颓废,现在就uboot的一些基础问题做一些笔记,顺便分享给大家,不过由于见识有限,如果有不足之处请多多指教. 位置无关?什么意思?我们先了解一些基础知 ...
- 关于CSS的外边距合并问题
首先,需要明确的是只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 而在普通文档流中,这又分两种情况,分别是父子元素之间和相邻元素之间. <!D ...
- golang的GET请求(类似于PHP的CURL)
check_url := "https://www.baidu.com" header := make(map[string]string) res, err := util.Hp ...
- setfacl命令 来自: http://man.linuxde.net/setfacl
常用选项##### <pre>-b,--remove-all:删除所有扩展的acl规则,基本的acl规则(所有者,群组,其他)将被保留. -k,--remove-default:删除缺省的 ...
- opencv 3.3.0 如何旋转图像？
函数介绍 1. void cv::flip(InputArray src,OutputArray dst,int flipCode) 2. void cv::transpose(InputArray ...
- 《android开发艺术探索》读书笔记（九）--四大组件
接上篇<android开发艺术探索>读书笔记(八)--WindowManager No1: 四大组件除了BroadcastReceiver,其他三种组件都必须在AndroidManifes ...
- CodeForces - 551C 二分+贪心
题意:有n个箱子形成的堆,现在有m个学生,每个学生每一秒可以有两种操作: 1: 向右移动一格 2: 移除当前位置的一个箱子 求移除所有箱子需要的最短时间.注意:所有学生可以同时行动. 思路:二分时间, ...