`

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开发不可或缺的一部分,广泛应用于各种需要实时数据交互的场景,如网页聊天、动态...

    AJAX(XMLHttpRequest)进行跨域请求方法详解

    AJAX(XMLHttpRequest)进行跨域请求方法详解 AJAX(XMLHttpRequest)跨域请求是指一个站点中的资源访问另外一个不同域名站点上的资源。这种情况很常见,比如说通过style标签加载外部样式表文件、通过img标签加载外部...

    一个简单的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对象,兼容所有主流浏览器(IE5除外)

    经测试,用此方法创建XMLHttpRequest对象,在运用AJAX的时候,可以的兼容IE6,IE7,IE8,Opera,Safari,Google Chrome,fireFox。主流的应该就这些吧?theWorld,遨游等浏览器都是以IE为核心的,所以肯定也没问题。 另外...

    Ajax简单实例 XMLHttpRequest

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

Global site tag (gtag.js) - Google Analytics