AJAX 简介以及基础的认识
程序员文章站
2022-05-21 09:22:31
...
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>
-->