原生态的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 ...
随机推荐
- qt中的udp编程
UDP QUdpSocket ---> upd socket 1.创建 QUdpSocket *p = new QUdpSocket(); 2.最先接收数据一方 调用bind-> ip/p ...
- a元素的两个重要功能和表格布局
⦁ 发送邮件:<a href="mailto:231455557@qq.com">联系我们</a> ⦁ 锚点两个重要应用:查看目录 提供菜单功能回到顶 ...
- 图论算法-网络最大流【EK;Dinic】
图论算法-网络最大流模板[EK;Dinic] EK模板 每次找出增广后残量网络中的最小残量增加流量 const int inf=1e9; int n,m,s,t; struct node{int v, ...
- php环境下所有的配置文件以及作用
以下主要是针对linux下的目录(windows也是一样,文件名都一样) Apache:etc/httpd.conf PHP:etc/php.ini (Apache 正在运行的 PHP 版本) M ...
- Java经典编程题50道之三十一
将一个数组逆序输出. public class Example31 { public static void main(String[] args) { int[] a = { 9 ...
- [翻译]【目录】编写高性能 .NET 代码
本篇是 Writing High-Performance .NET Code 的目录索引,翻译内容不定时更新,目录也会同步修改. 性能测量及工具 选择什么来衡量 平均数vs百分比 工具介绍 Visua ...
- bzoj 1814 Ural 1519 Formula 1 插头DP
1814: Ural 1519 Formula 1 Time Limit: 1 Sec Memory Limit: 64 MBSubmit: 942 Solved: 356[Submit][Sta ...
- tensorflow_mnist数据集一直加载错误的解决办法
tensorflow数据集一直加载错误的解决办法: from tensorflow.examples.tutorials.mnist import input_data mnist = input_d ...
- mac idea中的Application Server was not connected before run configuration stop, reason: Unable to ping server at localhost:1099问题
今天上午用的好好的就出现了这个问题 真是奇怪: Google了一番有以下解决办法: 1.hosts文件的问题: vi /etc/hosts文件 添加127.0.0.1 localhost里面 2.m ...
- java8 - IO
一.学习大纲: 1. 字符编码格式 2. 文件操作(实现文件的增.删.改.查等操作) 3. 目录操作(实现目录的增.删.改.查等操作) 4. 数据传输(实现对文件内容的读.写等操作) 二.关联类: 1 ...