完整的 AJAX 写法(支持多浏览器)
代码如下:
<script type="text/javascript">
var xmlhttp;
function Submit() {
//1.创建 XMLHttpRequest 对象
if (window.XMLHttpRequest) {
//IE7,IE8,FireFox,其它
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
//针对某些特定版本的mozillar浏览器的BUG进行修正
xmlhttp.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//IE6,IE5.5,IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 简单写法,应该也可以
//xmlhttp = new XMLHttpRequest()|| new ActiveXObject("Microsoft.XMLHTTP");
if (xmlhttp == undefined || xmlhttp == null) {
alert('当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器!');
return;
}
//将每次的状态保存到 数组里
array.push(xmlhttp.readyState);
//2.注册回调方法 callback
xmlhttp.onreadystatechange = callback;
//获取客户端内容
var userName = document.getElementById("UserName").value;
/*
//Get 请求方式
//3.设置和服务端交互的相应参数
xmlhttp.open("Get", "AjaxRequst.ashx?name="+userName, true);
//4.设置向服务器发送数据,启动和服务端的交互
xmlhttp.send();
*/
//Post 请求方式
//3.设置和服务端交互的相应参数
xmlhttp.open("Post", "AjaxRequst.ashx", true);
//Post方式需要增加的代码
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.设置向服务器发送数据,启动和服务端的交互
xmlhttp.send("name="+userName);
}
function callback() {
//5.判断和服务器端的交互是否完成,还要判断服务端的是否正确返回了数据
if (xmlhttp.readyState == 4) {
//表示和服务端的交互已经完成
if (xmlhttp.status == 200) {
//表示服务器的响应代码是200,正确的返回数据
//纯文件数据的接受方法
var message = xmlhttp.responseText;
//将返回的内容添加到DIV层里
var div = document.getElementById('message');
div.innerHTML = message;
//XML数据对应的DOM对象的接受方法
//使用前提是,服务器端需要设置content-type为text/xml
//var domXml = xmlhttp.responseXML;
}
}
}
</script>
完整的 AJAX 写法(支持多浏览器)的更多相关文章
- js将HTML中table导出到EXCEL word (只支持IE) 另用php 配合AJAX可以支持所有浏览器
转载请注明来源:https://www.cnblogs.com/hookjc/ <HTML> <HEAD> <title>WEB页面导出为EXC ...
- 使用 fetch 代替 ajax(在不支持的浏览器上使用 XHR); This kind of functionality was previously achieved using XMLHttpRequest.
原生 JS Ajax,GET和POST 请求实例代码_javascript技巧_脚本之家 https://www.jb51.net/article/86157.htm 更新时间:2016年06月08日 ...
- 第三十六课:如何书写一个完整的ajax模块
本课主要教大家如何书写一个完整的ajax模块,讲解的代码主要跟ajax有关,而jQuery的ajax模块添加了Deferred异步编程的机制,因此对ajax的理解难度增大,还是忽略掉.但是我要讲解的代 ...
- 原生Ajax写法(GET)
ajax的GET提交方式的原生代码: var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(w ...
- Struts2对AJAX的支持
一.简介 struts2确实一个非常棒的MVC框架.这里部分记述一下struts2对AJAX的支持.实现AJAX有两种方式,一种是使用原生的javascript代码实现,一种是使用第三方 ...
- MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)
该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...
- Unit02: JSON 、 使用JSON实现数据交换 、 jQuery对AJAX的支持,编码问题
Unit02: JSON . 使用JSON实现数据交换 . jQuery对AJAX的支持 1. 编码问题 (1)发送get请求 为什么会产生乱码? ie浏览器提供的ajax对象,对中文会使用gbk来编 ...
- IT兄弟连 JavaWeb教程 jQuery对AJAX的支持
jQuery对AJAX的支持 jQuery对Ajax请求的创建.发送.响应.注册数据处理函数.JSON的解析和缓存以及传参等都进行了相应的封装,同时也考虑了浏览器的兼容性问题. jQuery中对AJA ...
- Kendo UI for jQuery使用教程:支持Web浏览器
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
随机推荐
- POJ 3295 Tautology (构造题)
字母:K, A, N, C, E 表示逻辑运算 字母:p, q, r, s, t 表示逻辑变量 0 或 1 给一个字符串代表逻辑表达式,如果是永真式输出tautology 否则输出not 枚举每个逻辑 ...
- Golang项目目录结构组织
其实golang的工程管理还是挺简单的,完全使用目录结构还有package名来推导工程结构和构建顺序. 当然,首先要说的是环境变量$GOPATH,项目构建全靠它.这么说吧,想要构建一个项目,就要将这个 ...
- hdoj 2553 N皇后问题【回溯+打表】
N皇后问题 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- jQuery事件绑定的最佳实践
如果你经常使用jQuery,那么你也许很熟悉事件绑定.这是很基本的东西,但是深入一点,你就能够找到机会让你事件驱动的代码变得不太零碎,并且更容易管理. 更好的选择器策略 让我们从基础的例子开始.下面的 ...
- android_自定义布局
1.需要实现view类 2.如果需要实现自定义属性则: 1.定义资源文件attrs---->values 2. <?xml version="1.0" encoding ...
- heritrix 相关
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- 更改cmd语言(chcp)
chcp 437 更改为英文 chcp 936 更改为简体中文 mode con cp select=437 mode con cp /status chcp cmd /c "chcp 43 ...
- SEAndroid安全机制对Binder IPC的保护分析
在SEAndroid安全机制中,除了文件和属性,还有Binder IPC须要保护.Binder IPC是Android系统的灵魂,使用得相当广泛又频繁.比如,应用程序都是Binder IPC请求訪问系 ...
- 初学ios遇到问题记录01
刚刚接触IOS,花了一段时间看我基础部分的OC后 就想试着弄个小程序,于是看到 http://www.cnblogs.com/LooDo/p/3907064.html博文中的小程序,博主分析的很详细, ...
- struts2 struts.xml配置文件详解
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN&quo ...