原生态的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 ...
随机推荐
- phpstorm使用之——常用快捷键
phpstorm使用之--常用快捷键 使用IDE的根本所在乃是为了提高工作效率. windows下phpstorm的快捷键 ctrl+shift+n查找文件 ctrl+shift+f 在一个目录里查找 ...
- shell的if嵌套
shell脚本编写中,if是可以嵌套的, 注意,if条件表达式[]中的空格,以及后面的then就行了 if条件表达式后面的分号":"可有可无,不影响. 代码如下 myFile='c ...
- mysql中的coalesce用法
在mysql中,其实有不少方法和函数是很有用的,这次介绍一个叫coalesce的,拼写十分麻烦,但其实作用是将返回传入的参数中第一个非null的值,比如 SELECT COALESCE(NULL ...
- C控制语句：分支和跳转
小技巧:程序return前加个getchar();可以让程序停住.%%可以打印使printf()中打印出%号 #include<stdio.h>#define SPACE ''int ma ...
- angular4升级angular5问题记录之this.location.back()
在之前的项目中,导航回上一个路由采用注入的Location服务,利用浏览器的历史堆栈,导航到上一步. 官方文档也就是这么写的 而然在升级到5.2的版本的时候,在浏览器运行的时候并没有什么问题,在项目打 ...
- 1.2 decimal模块
>>> 0.1 + 0.1 +0.1 == 0.3 False >>> >>> print(0.1 + 0.1 + 0.1) 0.30000000 ...
- 阿里巴巴分布式服务框架 Dubbo 介绍
Dubbo是阿里巴巴内部的SOA服务化治理方案的核心框架,每天为2000+ 个服务提供3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点.Dubbo自2011年开源后, ...
- uva103 动态规划
多维矩形嵌套,和二维的一模一样.判断能否嵌套时需要先排序. AC代码: #include<cstdio> #include<cstring> #include<algor ...
- SpringBoot项目在IntelliJ IDEA中实现热部署
spring-boot-devtools是一个为开发者服务的一个模块,其中最重要的功能就是自动应用代码更改到最新的App上面去.原理是在发现代码有更改之后,重新启动应用,但是速度比手动停止后再启动更快 ...
- Ambari部署HDP：HBase Master启动后自动消失
这是第一次出勤部署产品.遇到不可控问题,解决,写个心得.记录一下吧^^ 在排查问题的过程中,学到不少知识. (1)centos系统盘和数据盘分开,装操作系统的人没有将IT的空间分配出来,所以分区,自动 ...