一：ajax概述
1.ajax简介
1.ajax是什么？
- asynchronous javascript and xml;异步的js和xml。
- 它能使用js访问服务器，而且是异步访问！
- 服务器给客户端相应的一般是整个页面，一个html完整页面！但在ajax中因为是局部刷新，那么服务器就不用再响应整个页面！而只是数据！
- 数据的表现方式：
1.text：纯文本
2.xml：两种语言都能识别
3.json：它是js提供的数据交互格式，它在ajax中最受欢迎
2.异步交互和同步交互
- 同步：发一个请求，就要等待服务器的响应结束，才能发第二个请求。刷新的是整个页面
- 异步：发一个请求后，无需等待服务器的响应，然后就可以发送第二个请求！可以使用js接受服务器的响应，然后使用js来局部刷新
javascript的局部刷新示例：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){//在文档加载完成后马上执行
var btu=document.getElementById("btu");
btu.onclick=function(){
var h1=document.getElementById("h1");
h1.innerHTML="Hello ajax!";
}
}
</script>
</head>
<body>
<button id="btu">点击这里</button>
<h1 id="h1"></h1>
</body>
</html>
异步交互和同步交互解析图：
2.AJAX常见应用场景和优缺点
- 应用场景：
- 用户注册时（校验用户名是否被注册过）
3.ajax的优缺点
优点：
- 异步交互：增强了用户的体验！
- 性能：因为服务器无需再响应整个页面，只需要响应部分内容，所以服务器的压力减轻了！
缺点：
- ajax不能应用在所有场景！
- ajax无端的增多‘了对服务器的访问次数 ，给服务器带来了压力！
4.ajax发送异步请求（四步操作）
- 第一步（得到XMLHttpRequest）
得到XMLHttpRequest
大多数浏览器都支持：var xmlHttp=new XMLHttpRequest()
IE6.0:var xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
IE5.5及更早的版本：var xmlHttp=new ActiveXObject（“Micorsoft.XMLHTTP”）;
利用函数得到XMLRequest对象：
function crateXMLHttpRequest() {
try {
return new XMLHttpRequest();
} catch (e) {
try {
return new ActiveObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveObject("Microsoft.XMLHTTP");
} catch (e) {
alert("哥们儿，你用的是什么浏览器啊？");
throw e;
}
}
}
}
-
第二步（打开与服务器的连接）
xmlHttp.open():用来打开与服务器的连接，它需要三个参数：
- 请求方式：可以是GET或POST
- 请求的URL：指定服务器的资源，例如：/a/servlet
- 请求是否为异步：如果为true表示发送同步请求，否则为异步请求!
xmlHttp.open(“GET”,“a/servlet”,true); -
第三步（发送请求）
xmlHttp.send(null):如果不给可能会造成部分浏览器无法发送！ -
第四步（）
在xmlHttp对象的一个事件上注册监听器：onreadystatechange
原创文章 114
获赞 84
访问量 1万+