// 定义一个全局的XMLHttpRequest对象
var xmlHttpRequest;
function verify() {
var userName = document.getElementById("userName").value;
// 创建XMLHttpRequst对象
// 需要这对IE核其他类型的浏览器建立这个对象的不同方法写不同的代码
if (window.XMLHttpRequest) {
// 针对FireFox,Mozilla,Opera,Safari,IE7,IE8
xmlHttpRequest = new XMLHttpRequest();
// 针对某些特定版本的Mozilla浏览器的BUG进行修正
try {
if (xmlHttpRequest.overrideMimeType()) {
xmlHttpRequest.overrideMimeType("text/xml");
}
} catch (e) {
}
} else if (window.ActiveXObject) {
// 针对IE6,IE5.5,IE5
// 两个可以用于创建XMLHTTPRquest对象的控件名称,保存在一个js的数组中
// 排在前面的版本比价新
var activexName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
try {
// 取出一个控件名进行创建,如果创建成功就终止循环
// 如果创建失败,会抛出异常,然后可以继续循环,继续尝试创建
xmlHttpRequest = new ActiveXObject(activexName[i]);
break;
} catch (e) {
}
}
}
// 确认XMLHttpReques对象创建成功
if (!xmlHttpRequest) {
alert("XMLHttpRequest对象创建失败!!");
return;
} else {
// 2.注册回调函数
// 注册毁掉函数时,只需要函数名不需要加括号
// 我们需要将函数名注册,如果加上括号,就会把函数的返回值注册上,这是错误的
xmlHttpRequest.onreadystatechange = callback;
// 3.设置连接信息
// 第一个参数表示http的请求方式,支持所有的饿http的请求方式,主要使用get核post
// 第二个参数表示请求的url路径
// 第三个参数表示采用同步还是异步,true表示异步
//xmlHttpRequest.open("GET", "AJAX?name=" + userName, true);
//POST方式请求的代码
xmlHttpRequest.open("POST","AJAX",true);
//POST方法需要自己设置http请求头
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 4发送数据,开始与服务器端交互
// 同步方式下,send这句话会在服务器端数据回来之后执行
// 异步方式下,send这句话会立即完成执行
//get方式的send方法参数为空
//xmlHttpRequest.send(null);
//post方式的send方法参数为你要传递的url参数
xmlHttpRequest.send("name="+userName);
}
}
// 5.回调函数
function callback() {
// 判断对象的状态是否交互完成
if (xmlHttpRequest.readyState == 4) {
// 判读http的交互是否成功
if (xmlHttpRequest.status == 200) {
// 获取服务器端的返回数据
var responseText = xmlHttpRequest.responseText;
// 将数据显示在页面上
// 通过dom方式找到dom对应的节点
var divResult = document.getElementById("result");
divResult.innerHTML = responseText;
}
}
}
分享到:
相关推荐
在AjaxXMLHttpRequest_Demo02.zip中,我们可能会看到以下几个关键组成部分: 1. **HTML文件**:通常命名为index.html,它是用户界面的基础,包含用户交互的元素,如按钮、输入框等。当用户触发某个事件(如点击按钮...
### AJAX与XMLHttpRequest概述 #### 一、引言 随着Web技术的发展,用户对Web应用的需求日益增长,不仅要求功能强大,还希望交互性更强、响应速度更快。AJAX(Asynchronous JavaScript and XML,异步JavaScript和...
本文的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体...他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。作者对ajax做了深入浅出讲解,很适合初学者学习,在这里和大家共同分享了。
XMLHttpRequest对象是Ajax技术的核心,它是现代Web应用中用于实现客户端与服务器间异步数据交换的关键组件。在不刷新整个页面的情况下,XMLHttpRequest允许开发者通过JavaScript动态更新网页内容,极大地提升了用户...
XMLHttpRequest(XHR)对象是实现AJAX的核心,它提供了异步通信的能力。这篇博客将深入探讨如何使用XMLHttpRequest进行AJAX请求。 首先,创建一个XMLHttpRequest实例是开始AJAX请求的第一步。在JavaScript中,你...
XMLHttpRequest对象是JavaScript中用于异步数据交换的核心组件,它是AJAX(Asynchronous JavaScript and XML)技术的基础。AJAX允许网页在不刷新整个页面的情况下,仅更新部分区域,从而提高用户体验。尽管名称中...
有想法就看看咯! 反正闲着也是闲着 不如多学点 我不知道这个别人传过不? 这是老师给的
总的来说,Ajax技术通过XmlHttpRequest对象实现了网页的局部刷新和异步通信,降低了网络负载,提升了用户体验。它已经成为现代Web开发不可或缺的一部分,广泛应用于各种需要实时数据交互的场景,如网页聊天、动态...
XMLHttpRequest(简称XHR)是AJAX(异步JavaScript和XML)技术的核心,它允许Web页面在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。这大大提升了用户体验,使得网页应用更加动态和交互性更强...
ajax XMLHttpRequest。。。。。。
以上就是一个简单的AJAX请求示例,通过XMLHttpRequest对象实现了与服务器的交互,而无需刷新整个页面。在实际应用中,开发者通常会使用jQuery、axios、fetch等库来简化这一过程,但理解XMLHttpRequest的工作原理对于...
XMLHttpRequest(简称XHR)对象是实现AJAX的核心,它允许JavaScript与服务器进行异步数据交换。在本文中,我们将深入探讨XMLHttpRequest对象的创建和使用,以及如何向服务器发送请求。 首先,创建XMLHttpRequest...
xmlHttpRequest对象的status代表当前http请求的状态,是一个长整型数据,现在介绍一下它的含义。 http请求状态及其含义表 1xx – 信息提示 100 – 初始的请求已经接受,客户应当继续发送请求的其余部分。(HTTP 1.1...
Ajax核心对象XMLHTTPRequest详细参数及例子
本实例将通过XMLHttpRequest对象来展示Ajax的基础用法,非常适合初学者学习。 首先,要理解XMLHttpRequest对象是Ajax的核心,它负责在后台与服务器进行通信。在JavaScript中,我们可以通过以下方式创建一个...