AJAX 简介以及基础的认识

最新推荐文章于 2024-08-12 09:24:46 发布

rjbusiness

最新推荐文章于 2024-08-12 09:24:46 发布

阅读量62

点赞数

分类专栏： AJAX 文章标签： ajax javascript 浏览器 xml java ViewUI

本文链接：https://blog.csdn.net/zhang583740618/article/details/88341005

版权

AJAX 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

[size=small][color=olive][b]
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、开发难点问题；
[/b][/color][/size]

[size=x-small][color=red][b]读取XML文件时的数据源：book.xml文件[/b][/color][/size]

<?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>

[size=medium][color=indigo][b]使用介绍如下：[/b][/color][/size]

<%@ 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>