AJAX 简介以及基础的认识

1140566087

浏览: 548302 次
性别:
来自: 武汉

最近访客更多访客>>

chenqisdfx

xiaoDeng998

hslb1985

lesley.chen

博主相关

博客

微博

相册

留言

关于我

博客专栏

: c/c++ 入门笔记
浏览量：18103

: Android 学习笔记
浏览量：309740

: J2ME 基础学习课程集
浏览量：18041

: Spring 学习过程记录...
浏览量：17212

文章分类

社区版块

存档分类

博客分类：

AJAX

ajax javascript 浏览器 xml java

AJAX 是什么：

AJAX = 异步 JavaScript 和 XML；
AJAX 是一种在无需加载整个网页的情况下，能够更新部分网页的技术；
AJAX 是一种在2005年由Google 推广开来的变成模式；
AJAX 不是一种新的变成语言，而是一种使用现有新标准的方法，通过AJAX可以创建更好、更快以及
更友好的WEB 应用程序；
AJAX 基于JavaScript 和 HTTP 请求(HTTP request)，通过后台与服务器进行少量
数据交换，AJAX可以使用网页实现异步更新，\局部更新；

重要的对象：XMLHttpRequest 对象，所有现代浏览器支持的对象：IE7+ Firefox/Chrome/Safari
创建语法：
var xmlhttprequest = new XMLHttpRequest();

IE6 以下版本使用：ActiveXObject对象；
var xmlhttprequest = new ActiveXObject("Microsoft.XMLHTTP");

提示：当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当readyState改变时，就会触发onreadystatechange事件。
readyState属性存有XMLHttpRequest的状态信息；

XMLHttpRequest 对象的属性介绍：
onreadystatechange（当准备好的状态发生改变的时候）：
存储函数(函数名),每当readyState属性改变时，就会调用函数；

readyState(准备好的状况)：
存有XMLHttpRequest 的状态，从0 到4 发生变化，
0：请求未初始化；
1：服务器连接已建立；
2：请求已接收；
3：请求处理完成；
4：请求已完成，且响应已就绪；

status(状态):
200 ：“OK”
404：未找到页面；

AJAX 缺点介绍：
不能只说好处而不说坏处，没有完美的编程语言：
1、前进后退按钮失效
2、性能问题；
3、安全问题；
4、开发难点问题；

读取XML文件时的数据源：book.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<books>
	<book>
		<title>JAVA</title>
		<price>200</price>
	</book>
	<book>
		<title>C#</title>
		<title>八嘎</title>
		<title>dd</title>
		<price>300</price>
	</book>
	<book>
		<title>.net</title>
		<price>3.0</price>
	</book>
	<book>
		<price>3.0</price>
	</book>
</books>

使用介绍如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

	<script type="text/javascript">
		var xmlhttp;
		
		//测试IE内核版本
		function getIE()
		{	
			// IE 6.0 以上及其它浏览器
			if(window.XMLHttpRequest){
				
				xmlhttp = new XMLHttpRequest();
			
			}else{//6.0  以下的版本:IE 6 / IE 5
			
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		
		//执行操作
		function getChange(obj)
		{
			//获取正确的版本运行环境
			getIE();
			
			// 访问地址
			var url ="${pageContext.request.contextPath}/user_show.action?username="+obj.value;
			//编码转换
			var myurl = encodeURI(url);
			
			//打开:参数 ：            提交方式       地址              是否异步提交
			/*
				Method: 请求类型，get/post
				url：文件在服务器上的位置
				Async: true 异步，false 同步	
				
				post 比 get 更加稳定可靠；
				post 没有数据量的限制
			*/
			xmlhttp.open("post",myurl, true);
			
			//准备好了是否回调,此处回调方法不能增加括号
			xmlhttp.onreadystatechange = getBack;
			
			//将请求发送到服务器  ： string 仅用于post请求；
			xmlhttp.send();
			
		}
		
		//方法的回调
		function getBack()
		{
			//xmlhttp.readyState 请求已完成，响应已就绪
			//xmlhttp.status==200 状态OK
			if(xmlhttp.readyState == 4  && xmlhttp.status==200){
				/*
					获取服务器的响应：使用XMLHttpRequest对象的：
					responseText : 获取字符串形式的响应数据
					responseXML : 获取xml形式的响应数据
					
				*/
				document.getElementById("xx").innerHTML = xmlhttp.responseText;
			}
		}
		
		// 获取xml 文件，并读取数据
		function getXML()
		{
			getIE();
			var url = "${pageContext.request.contextPath}/book/book.xml";
			xmlhttp.open("post", url,true);
			xmlhttp.onreadystatechange = getBack2;
			xmlhttp.send();
		}
		
		//回调处理XML 中的数据
		function getBack2()
		{	
			if(xmlhttp.readyState==4 && xmlhttp.status){
				var t = xmlhttp.responseXML;
				//此处获取到的是一个集合
				var x = t.getElementsByTagName("title");
				var y = t.getElementsByTagName("price");
				alert(" "+x[2].childNodes[0].nodeValue+" "+y.length);
				var txt = "";
				for(i=0;i<x.length;i++){
					txt = txt+x[i].childNodes[0].nodeValue+" "+y[i].childNodes[0].nodeValue+"</br>";
				}
				document.getElementById("xx").innerHTML= txt;
			}
		}
	
	
	</script>
  </head>
  
  <body>
   	请输入您情人的名字：<input type="text" onblur="getXML();">
   	<div id="xx"></div>
  </body>
</html>

-->

ajax.rar (4.7 MB)
下载次数: 2

分享到：

Spring S2S集成开发 | Hibernate 分页查询 HQL查询

2013-10-26 11:55
浏览 623
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论