`

AjaxXMLHttpRequest

    博客分类:
  • AJAX
阅读更多
// 定义一个全局的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

    在AjaxXMLHttpRequest_Demo02.zip中,我们可能会看到以下几个关键组成部分: 1. **HTML文件**:通常命名为index.html,它是用户界面的基础,包含用户交互的元素,如按钮、输入框等。当用户触发某个事件(如点击按钮...

    AJAX XMLHttpRequest慨述

    ### AJAX与XMLHttpRequest概述 #### 一、引言 随着Web技术的发展,用户对Web应用的需求日益增长,不仅要求功能强大,还希望交互性更强、响应速度更快。AJAX(Asynchronous JavaScript and XML,异步JavaScript和...

    4天学会ajax XMLHttpRequest

    本文的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体...他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。作者对ajax做了深入浅出讲解,很适合初学者学习,在这里和大家共同分享了。

    全面剖析 Ajax XMLHttpRequest对象

    XMLHttpRequest对象是Ajax技术的核心,它是现代Web应用中用于实现客户端与服务器间异步数据交换的关键组件。在不刷新整个页面的情况下,XMLHttpRequest允许开发者通过JavaScript动态更新网页内容,极大地提升了用户...

    js ajax XMLHttpRequest的使用

    XMLHttpRequest(XHR)对象是实现AJAX的核心,它提供了异步通信的能力。这篇博客将深入探讨如何使用XMLHttpRequest进行AJAX请求。 首先,创建一个XMLHttpRequest实例是开始AJAX请求的第一步。在JavaScript中,你...

    jQuery AJAX XMLHttpRequest对象PPT

    XMLHttpRequest对象是JavaScript中用于异步数据交换的核心组件,它是AJAX(Asynchronous JavaScript and XML)技术的基础。AJAX允许网页在不刷新整个页面的情况下,仅更新部分区域,从而提高用户体验。尽管名称中...

    Ajax XMLHttpRequest对象新手入门

    有想法就看看咯! 反正闲着也是闲着 不如多学点 我不知道这个别人传过不? 这是老师给的

    基于Ajax XmlHttpRequest技术的通信实例及调试.pdf

    总的来说,Ajax技术通过XmlHttpRequest对象实现了网页的局部刷新和异步通信,降低了网络负载,提升了用户体验。它已经成为现代Web开发不可或缺的一部分,广泛应用于各种需要实时数据交互的场景,如网页聊天、动态...

    一个简单的xmlHttpRequest ajax的例子

    XMLHttpRequest(简称XHR)是AJAX(异步JavaScript和XML)技术的核心,它允许Web页面在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。这大大提升了用户体验,使得网页应用更加动态和交互性更强...

    ajax 对象池,一个页面多个XMLHttpRequest对象

    ajax XMLHttpRequest。。。。。。

    AJAX XMLHttpRequest对象详解

    以上就是一个简单的AJAX请求示例,通过XMLHttpRequest对象实现了与服务器的交互,而无需刷新整个页面。在实际应用中,开发者通常会使用jQuery、axios、fetch等库来简化这一过程,但理解XMLHttpRequest的工作原理对于...

    AJAX XMLHttpRequest对象创建使用详解

    XMLHttpRequest(简称XHR)对象是实现AJAX的核心,它允许JavaScript与服务器进行异步数据交换。在本文中,我们将深入探讨XMLHttpRequest对象的创建和使用,以及如何向服务器发送请求。 首先,创建XMLHttpRequest...

    Ajax xmlHttpRequest的status的值的含义

    xmlHttpRequest对象的status代表当前http请求的状态,是一个长整型数据,现在介绍一下它的含义。 http请求状态及其含义表 1xx – 信息提示 100 – 初始的请求已经接受,客户应当继续发送请求的其余部分。(HTTP 1.1...

    Ajax核心对象XMLHTTPRequest

    Ajax核心对象XMLHTTPRequest详细参数及例子

    Ajax简单实例 XMLHttpRequest

    本实例将通过XMLHttpRequest对象来展示Ajax的基础用法,非常适合初学者学习。 首先,要理解XMLHttpRequest对象是Ajax的核心,它负责在后台与服务器进行通信。在JavaScript中,我们可以通过以下方式创建一个...

Global site tag (gtag.js) - Google Analytics