具体解释Ajax技术

Ajax 可以做什么？

现在 Google Suggest 和 Google Maps 使用了 Ajax，通过 Ajax，我们能够使得client得到丰富的应用体验及交换操作，而用户不会感觉到有网页提交或刷新的过程，页面也不须要被又一次载入，应用的数据交换都被隐藏。

传统的 WEB 应用程序模型是这样工作的：用户的界面操作触发 HTTP 请求，server在接收到请求之后进行一些业务逻辑处理，如保存数据等，然后向client返回一个 HTML 页面。但这样的方式并没有给予用户非常好的应用体验，当server在处理数据的时候，用户则处于等待的状态，每一步操作都须要等待，太多的等待会使用户越来越没有耐心。而 Ajax 则大不同样，它通过 Ajax 引擎，使得应用过程非常自然，操作非常流畅，由于其仅仅和server交换实用的数据，而页面显示等不必要的数据则不再又一次载入。Ajax
引擎事实上就是 JavaScript、XML、XMLHttpRequest 等等各项技术的综合应用。

为什么使用AJAX?

　　1、通过适当的Ajax应用达到更好的用户体验；

　　2、把曾经的一些server负担的工作转嫁到client，利于client闲置的处理能力来处理，减轻server和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。

AJAX从哪里来的?

　　Ajax这个概念的最早提出者Jesse James Garrett觉得：

　　Ajax是Asynchronous JavaScript and XML的缩写。

　　Ajax并非一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包含：

  • 使用XHTML和CSS标准化呈现;
  • 使用DOM实现动态显示和交互;
  • 使用XML和XSLT进行数据交换与处理;
  • 使用XMLHttpRequest进行异步数据读取;
  • 最后用JavaScript绑定和处理全部数据;

　　Ajax的工作原理相当于在用户和server之间加了—个中间层,使用户操作与server响应异步化。并非全部的用户请求都提交给server,像—些数据验证和数据处理等都交给Ajax引擎自己来做,仅仅有确定须要从server读取新数据时再由Ajax引擎代为向server提交请求。

AJAX的核心技术有哪些？

　　尽管Garrent列出了7条Ajax的构成技术，但个人觉得，所谓的Ajax其核心仅仅有JavaScript、XMLHTTPRequest和DOM，假设所用数据格式为XML的话，还能够再加上XML这一项(Ajax从server端返回的数据能够是XML格式，也能够是文本等其它格式)。

　　在旧的交互方式中,由用户触发一个HTTP请求到server,server对其进行处理后再返回一个新的HTHL页到client,每当server处理client提交的请求时,客户都仅仅能空暇等待,而且哪怕仅仅是一次非常小的交互、仅仅需从server端得到非常easy的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去又一次读取整个页面。

　　而使用Ajax后用户从感觉上差点儿全部的操作都会非常快响应没有页面重载（白屏）的等待。

XMLHttpRequest简称 XmlHttp

它是一套能够在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其它数据的一套API。XmlHttp最大的用处是能够更新网页的部分内容而不须要刷新整个页面。

来自MSDN的解释：XmlHttp提供client同httpserver通讯的协议。client能够通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向httpserver发送请求并使用微软XML文档对象模型Microsoft? XML Document Object Model (DOM)处理回应。

如今的绝对多数浏览器都添加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象，其它浏览器如：Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。

属性：

onreadystatechange* 指定当readyState属性改变时的事件处理句柄。仅仅写
readyState 返回当前请求的状态，仅仅读.
responseBody 将回应信息正文以unsigned byte数组形式返回.仅仅读
responseStream 以Ado Stream对象的形式返回响应信息。仅仅读
responseText 将响应信息作为字符串返回.仅仅读
responseXML 将响应信息格式化为Xml Document对象并返回，仅仅读
status 返回当前请求的http状态码.仅仅读
statusText 返回当前请求的响应行状态，仅仅读

着重介绍下readyState属性

返回XMLHTTP请求的当前状态，每一个数值代表一个状态

0 (未初始化) 对象已建立，可是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，可是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，由于响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完毕) 数据接收完成,此时能够通过通过responseBody和responseText获取完整的回应数据

方法：

abort 取消当前请求
getAllResponseHeaders 获取响应的全部http头
getResponseHeader 从响应信息中获取指定的http头
open 创建一个新的http请求，并指定此请求的方法、URL以及验证信息(username/password)
send 发送请求到httpserver并接收回应
setRequestHeader 单独指定请求的某个http头

怎样正确使用Ajax？

这里我们拿一个项目中经常使用的用户注冊校验是否有反复username存在的案例来演示。并分别用get方式回传json，post方式回传json，post方式回传xml来演示。

首先我们得考虑在不同浏览器下怎样获得XmlHttp对象

function creatXmlHttpRequest()
{
	if (typeof XMLHttpRequest != ‘undefined‘)
	{
		return new XMLHttpRequest();
	}
	else if (typeof ActiveXObject != ‘undefined‘)
	{
		var MSXML = [‘MSXML2.XMLHTTP.6.0‘, ‘MSXML2.XMLHTTP.5.0‘,
				‘MSXML2.XMLHTTP.4.0‘, ‘MSXML2.XMLHTTP.3.0‘, ‘MSXML2.XMLHTTP‘,
				‘Microsoft.XMLHTTP‘];
		for (var i = 0; MSXML.length; i ++)
		{
			try{
				return new ActiveXObject(version[i]);
			}catch (e)
			{
				//.......
			}
		}
	}
	else
	{
		throw new Error(‘您的系统或浏览器不支持XHR对象！‘);
	}
}

GET方式回传json

function checkUserByAjaxGet()
{
	// 第一步，得到一个XMLHttpRequest对象
	// var xhr=new XMLHttpRequest();
	// 假设说IE6，就须要使用Active组建
	// xmlhttp=new ActiveXObject(MSXML[n]);
	var xhr = creatXmlHttpRequest();
	var name = document.rgform.username.value;
	// 设置一个事件的监听函数
	xhr.onreadystatechange = function()
	{
		if (xhr.readyState == 4)
		{
			if (xhr.status == 200 || xhr.status == 304)
			{
				var ret = xhr.responseText;
				var _ret = eval(‘(‘ + ret + ‘)‘);
//				var _ret = JSON.parse(ret);
				document.getElementById("msg").innerHTML = _ret.tip;
				if (_ret.success = true)
				{
					document.rgform.username.focus();
				}
			}
		}
	}
	// 第二步，准备一个连接请求
	xhr.open("get", "checkuserByJSON.jsp?name=" + name, true);
	// 第三步，发起请求
	xhr.send(null);
}

POST方式回传json

function checkUserByAjaxPost()
{
	// 第一步,创建xhr对象
	var xhr = creatXmlHttpRequest();
	var name = document.rgform.username.value;
	// 第二步,设置一个事件的监听函数
	xhr.onreadystatechange = function()
	{
		if (xhr.readyState == 4)
		{
			if (xhr.status == 200 || xhr.status == 304)
			{
				var ret = xhr.responseText;
				var _ret = eval(‘(‘ + ret + ‘)‘);
//				var _ret = JSON.parse(ret);
				document.getElementById("msg").innerHTML = _ret.tip;
				if (_ret.success = true)
				{
					document.rgform.username.focus();
					alert(xhr.getResponseHeader("Content-Length"));
					alert(xhr.getResponseHeader("Content-Type"));
					alert(xhr.getResponseHeader("Date"));
					alert(xhr.getResponseHeader("Server"));
				}
			}
		}
	}
	// 第三步,准备一个POST连接请求
	xhr.open("post", "checkuserByJSON.jsp", true);
	// 使用post方式提交，必需要加上例如以下一行
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	// 第四步,发起请求
	xhr.send("name=" + name + "&password=ppppp");
}

POST方式回传xml

function checkUserByAjaxPostXml() {
	// 第一步,创建xhr对象
	var xhr = creatXmlHttpRequest();
	var name = document.rgform.username.value;
	// 第二步,设置一个事件的监听函数
	xhr.onreadystatechange = function()
	{
		if (xhr.readyState == 4)
		{
			if (xhr.status == 200 || xhr.status == 304)
			{
				var ret = xhr.responseXML;
				var successNode = ret.getElementsByTagName("success")[0];
				var tipNode = ret.getElementsByTagName("tip")[0];
				document.getElementById("msg").innerHTML = tipNode.firstChild.nodeValue;
				if (successNode.firstChild.nodeValue == true)
				{
					document.rgform.username.focus();
				}
			}
		}
	}
	// 第三步,准备一个POST连接请求
	xhr.open("post", "checkuserByXML.jsp", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	// 第四步,发起请求
	xhr.send("name=" + name + "&password=ppppp");
}

返回的的json

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="java.util.*" %>
<%
String username = request.getParameter("username");
response.setContentType("application/json;charset=UTF-8");
response.setHeader("pragma","no-cache");
response.setHeader("cache-control","no-cache");
if("admin".equals(username))
{
	response.getWriter().write("{\"success\":"+true+",\"tip\":\"用户名已存在\"}");
}
else
{
	response.getWriter().write("{\"success\":"+false+",\"tip\":\"用户名能够使用\"}");
}
%>

返回的xml

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="java.util.*" %>
<%
String userId = request.getParameter("name");
response.setContentType("application/xml;charset=UTF-8");
response.setHeader("pragma","no-cache");
response.setHeader("cache-control","no-cache");
if("admin".equals(userId))
{
	response.getWriter().write("<root><success>true</success><tip>username已存在</tip></root>");
}
else
{
	response.getWriter().write("<root><success>false</success><tip>username能够使用</tip></root>");
}
%>

界面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>register.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

	<script type="text/javascript" src="js/register.js"></script>
	<script type="text/javascript" src="js/jquery-1.5.2.js"></script>
	<style type="text/css">
		#round {
		    padding:10px; width:300px; height:150px;
		    border:1px solid #000;
		    -moz-border-radius: 10px;
		    -webkit-border-radius: 10px;
		    border-radius:10px;
		    margin:10px auto;
		}
		#round div.user, #round div.pass {
			font-size:14px;
			color:#666;
			padding:15px 0;
			text-align:center;
			position: relative;
		}
		#round span{
			position: absolute;
			color:red;
			top:35px;
			left:100px;
		}
		#round input.text {
			width:200px;
			height:25px;
			border:1px solid #ccc;
			background:#fff;
			font-size:14px;
		}
		#round .button {
			padding:5px 0;
			text-align:center;
		}
	</style>
  </head>

  <body>
  	<div id="round">
	    <form name="rgform" method="post" action="" >
		    <div class="user">
			   	 用户名:<input type="text" name="username"  id="username" onchange="事件调用的方法">
			   	 <span id="msg"></span>
		   	 </div>
		   	 <div class="pass">
		     	密  码:<input type="password"  name="password" id="password">
		     </div>
		     <div class="button"><input type="button" value="提交"/></div>
    	</form>
    </div>
  </body>
</html>

效果图

使用过jQuery异步请求的方法的同学，肯定认为那个相当好用，相比而言，上面写的相当繁琐，get方式和post方式请求甚至还有部分代码是有非常大差别的，那应怎样通过代码的方式屏蔽这些差别呢，这里我们仿一下jQuery 的$.ajax() 方法。

//封装ajax
function ajax(obj) {
	var xhr = creatXmlHttpRequest();
	obj.url = obj.url + ‘?rand=‘ + Math.random();
	obj.data = params(obj.data);
	if (obj.method === ‘get‘) obj.url += obj.url.indexOf(‘?‘) == -1 ? ‘?‘ + obj.data : ‘&‘ + obj.data;
	if (obj.async === true) {
		xhr.onreadystatechange = function () {
			if (xhr.readyState == 4) {
				callback();
			}
		};
	}
	xhr.open(obj.method, obj.url, obj.async);
	if (obj.method === ‘post‘) {
		xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘);
		xhr.send(obj.data);
	} else {
		xhr.send(null);
	}
	if (obj.async === false) {
		callback();
	}
	function callback() {
		if (xhr.status == 200) {
			obj.success(xhr.responseText);			//回调传递參数
		} else {
			alert(‘获取数据错误！错误代号：‘ + xhr.status + ‘，错误信息：‘ + xhr.statusText);
		}
	}
}
//名值对转换为字符串
function params(data) {
	var arr = [];
	for (var i in data) {
		arr.push(encodeURIComponent(i) + ‘=‘ + encodeURIComponent(data[i]));
	}
	return arr.join(‘&‘);
}

调用我们封装的ajax方法

window.onload = function(){
	document.getElementById("username").onchange = function(){
		ajax({
			method : ‘post‘,
			url : ‘checkuserByJSON.jsp‘,
			data : {
				‘username‘ : document.rgform.username.value,
				‘password‘ : document.rgform.password.value
			},
			success : function (text) {
					var _ret = eval(‘(‘ + text + ‘)‘);
					document.getElementById("msg").innerHTML = _ret.tip;
			},
			async : true
		});
	}
}

我们给ajax传的就是一个object对象，是不是已经非常贴近jQuery的方式了呢。

具体解释Ajax技术

时间： 2024-10-07 06:33:20

具体解释Ajax技术的相关文章

Ajax技术基础

对于AJAX技术,感觉以前虽然用过但是对于AJAX没有一个清晰的认识,今天专门总结一下,希望掌握的更加牢固吧! 一,什么是AJAX? AJAX通常被叫做异步刷新技术,其实他也是可以同步的.主要都用于异步访问服务器. 在通常情况下,我们的页面都是静态的,如果想要与服务器交互,我们可以通过一系列的手段来向服务器发送请求,并将返回的信息展示在页面上,但是通常需要刷新页面,如果不停的请求就需要不停的刷新整个页面,这对于客户而言带来很大的麻烦,尤其是网速很慢的情况,本来只需要更改页面一小点地方的信息,却要

ajax技术的背景

不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax的流行.而这也让微软感到无比的尴尬,因为早在97年,微软便已经发明了ajax中的关键技术,并且在99年IE5推出之时,它便开始支持XmlHttpRequest对象,并且微软之前已经开始在它的一些产品中应用ajax,比如说MSDN网站菜单中的一些应用.遗憾的是,不知道出于什么想法,当时微软发明了ajax的核心技术之后,并没有

【java项目实践】具体解释Ajax工作原理以及实现异步验证username是否存在+源代码下载(java版)

一年前,从不知道Ajax是什么,伴随着不断的积累,到如今常常使用,逐渐有了深入的认识. 今天,假设想开发一个更加人性化,友好,无刷新,交互性更强的网页,那您的目标一定是Ajax. 介绍 在具体讨论Ajax是什么之前,先让我们花一分钟了解一下Ajax做什么.如图所看到的: 如上图展示给我们的就是使用Ajax技术实现的效果.伴随着web应用的越来越强大而出现的是等待.等待server响应,等待浏览器刷新.等待请求返回和生成新的页面成为了程序猿们的最最头疼的难题.随着Ajax的出现使web应用程序变得

AJAX技术简介及入门实例

最近在学校参加暑期实习,参与的是一个社交网站项目,学长那边分配给的任务是前端开发,需要学习AJAX技术. 对于一个像我一样刚刚接触Web开发且无多少实际项目经验的新手而言,AJAX技术显得复杂而又深奥.经过两天的baidu.google,我对AJAX的基本原理有了一个大致的认识,在此总结一下. 1. 什么是AJAX? AJAX全称是异步的JavaScript和XML,是Asynchronous JavaScript and XML的缩写.AJAX技术用于创建交互式网页应用的网站开发,至于何为异步

5）bootstrcp和ajax技术的使用和介绍

JQ的dom用法: append:追加 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><div class="box"></div><script src="0

Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现)

Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现) 一丶CSRF相关的装饰器 from django.utils.decorators import method_decorator # 给cbv加上装饰器 from django.views import View from django.views.decorators.csrf import csrf_exempt, csrf_protect ### 在FBV模式下 # csrf_exempt

Ajax 技术学习

一.Ajax 基础 1.1 什么是 Ajax? 1.2 在哪里我们会用到 ajax 1.3 ajax 的工作原理 1.4 XMLHttpRequest 对象 1.4.1 XMLHttpRequest 常用方法 1.4.2 XMLHttpRequest 常用属性 二.让我们来试一试吧 2.1 简单的使用 ajax ,验证用户名是否合法 2.1.1 前端 demo (index.jsp) 2.1.2 JavaScript demo 2.1.3 2.1.4 后端 servlet 代码 2.2 运行截图

ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动

今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新]的[异步]通讯技术, 说白了就是局部刷新. 二.ajax的原理如下图 附上ajax与服务器之间的几种状态,但 4是所有浏览器都支持的的 三.ajax包含的技术如下图 四.ajax开发步骤 步一:创建ajax对象,例如:ajax = createAjax(); 步二:开启异步对象:例如:ajax.o

jQuery学习笔记10：Ajax技术

jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load().$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法. 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个