【Ajax技术】Ajax技术回顾与XHR对象的创建

简介:

上一次写的这个js,实现了用javascript中的jquery来调取ajax内核来实现与服务器端的数据联通:

//定义用户名校验的方法
function verify(){
	
	//1.获取文本框当中的内容
	//document.getElementById("username");  dom的方式
	//jquery的查找节点的方式,参数中#加上id属性值可以找到一个节点
	//jquery的方法返回的都是jquery的对象,可以继续在上面执行其他的jquery方法
	var jqueryObj=$("#username");
	var userName=jqueryObj.val();
	//alert("文本框的值是:"+userName);
	
	
	//2.将文本中的数据发送给服务器的servlet
	//用javascript的话,写向服务器发数据的代码很长很痛苦,使用jquery一句话就够了
	//详情查看Jquery的API帮助文档的Ajax部分
	//使用jauery的XMLHTTPrequest对象get请求的封装
	//get请求第一个参数是后台服务类的名称,参数二是post方式加的参数(这里用get,写成null)
	//第三个参数是回调函数(做异步)
	$.get("AjaxServer?name="+userName,null,callback);


}

//回调函数
function callback(data){
	
	//3.接受服务器端返回的数据
	//alert(data);
	
	//4.将服务器返回的数据动态的显示在页面上
	//找到保存信息的节点
	var resultObj=$("#result");
	//往这个节点填充服务器返回的值
	//div节点中的内容就会被改变
	resultObj.html(data);
}

那么,jquery内部是如何实现与服务器端的交互呢?也就是不用jquery,自己如何使用javascript本身来实现ajax的效果呢?

原理就是利用javascript的XMLHttprequest对象来实现ajax,俗称“五大步”:
我们重新写一个不引用jquery的js文件:
//用户名校验的方法
//这个方法使用AMLHttpRequest对象来进行AJAX的异步数据交互
function verify(){
	//1.使用最基本的DOM_API来获取文本框中的值
	//document.getElementById("username")是dom中获取元素节点的一种方法,一个元素节点对应HTML
	//页面中的一个标签,.value可以获取一个元素节点的value属性值
	//
	var username=document.getElementById("username").value;
	
	//2.创建XMLHttpRequest对象
	var xmlhttp;
	//这是XMLHttpRequest对象五步使用中最复杂的一步
	//这是由于各种浏览器兼容问题造成的,要使用各种库来屏蔽掉这种差异
	//下面根据IE和其它类型的浏览器建立这个对象的不同方式写不同的代码
	if(window.XMLHttpRequest){
		//针对FireFox、Mozillar、Opera、Safari、IE7、IE8
		xmlhttp=new XMLHttpRequest();
		//修复类似Mozillar浏览器的bug
		if(xmlhttp.overrideMimeType){
			xmlhttp.overrideMimeType("text/xml");
		}
	}else if(window.ActiveXObject){
		//所有的IE中window.ActiveXObject条件都成立
		//针对IE6、IE5.5、IE5(现在没人用了,可以把这条if分支删除)
		//两个可以用于创建XMLHttpRequest对象的控件名称,保存在一个js的数组中
		//排在前面的版本最新
		var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
		for(var i=0;i<activeName.length;i++){
			try{
				//获取一个控件名进行创建,如果创建成功就终止循环
				//如果创建失败,会抛出异常,然后就可以继续循环,继续尝试创建
				xmlhttp=new ActiveXObject(activeName[i]);
				break;
			}catch(e){
				//仍然不能创建,抛出异常后,给出友好提示
			}
		}		
	}
	//确认XMLHttpRequest对象创建成功
	if(!xmlhttp){
		alert("XMLHttpRequest对象创建失败!!");
	}else{
		alert(xmlhttp);
	}

}

上面的代码实现了获取XMLHttpRequest的功能,下一篇总结我们写使用XHR对象发送和接受数据。

转载请注明出处:http://blog.csdn.net/acmman/article/details/47667067

相关文章
|
1月前
|
XML 前端开发 JavaScript
AJAX 前端开发利器:实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容,实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象,可发送和接收数据。当用户触发事件(如点击),函数向服务器发送GET请求,服务器响应后更新指定HTML部分。AJAX并非编程语言,而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象,它有多种方法(如`open()`和`send()`)和属性(如`onreadystatechange`、`readyState`和`status`)来处理请求和响应。
76 2
AJAX 前端开发利器:实现网页动态更新的核心技术
|
1月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
25 0
|
1月前
|
XML JSON 前端开发
JavaWeb----Ajax技术
JavaWeb----Ajax技术
63 0
|
2天前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
1月前
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
27 3
|
1月前
|
前端开发 搜索推荐 安全
AJAX和CSR(客户端渲染)是Web开发中常用的两种技术
【5月更文挑战第8天】AJAX提升用户体验,减轻服务器压力,但对搜索引擎不友好且增加开发复杂度,易引发安全问题。CSR提供快速响应和交互性,改善用户体验,但首屏加载慢,搜索引擎支持不足,同样面临安全挑战。两者各有适用场景,需按项目需求选择。
23 0
|
1月前
|
XML 前端开发 JavaScript
【JavaScript技术专栏】JavaScript网络请求与Ajax技术
【4月更文挑战第30天】Ajax是Web开发中实现动态数据更新的关键技术,允许不刷新页面即从服务器获取数据。它结合了HTML/CSS、DOM、XML/JSON和JavaScript。`XMLHttpRequest`是传统的Ajax实现方式,而`fetch` API是现代、简洁的替代选项。Ajax应用实例展示了如何使用fetch在搜索框输入时异步获取并显示结果,提升了用户体验。掌握这些技术对前端开发者至关重要。
|
1月前
|
JSON 前端开发 JavaScript
JavaScript原生实现AJAX技术详解
【4月更文挑战第22天】本文详细介绍了使用原生JavaScript实现AJAX技术,包括基本原理和步骤。AJAX借助`XMLHttpRequest`对象实现异步通信,允许网页在不刷新情况下与服务器交换数据。文中提供示例展示了如何创建请求、设置回调函数、处理响应数据以及设置请求头和发送不同类型的数据。此外,还讨论了跨域问题及其解决方案,如CORS和JSONP。掌握这些基础知识对前端开发者至关重要,尽管现代框架提供了更高级的抽象。
|
1月前
|
前端开发
用Promise对象实现的 Ajax
用Promise对象实现的 Ajax
13 0
|
1月前
|
XML 前端开发 JavaScript
AJAX - 创建 XMLHttpRequest 对象
AJAX - 创建 XMLHttpRequest 对象