什么是Ajax?
AJAX 英文是”Asynchronous JavaScript And XML”,它是一种创建交互网页应用的开发技术.
通过在后台与服务器进行频繁而少量数据的交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,更新网页的某个部分。对于不使用AJAX的传统网页,如果需要更新内容,必须重载整个网页。
为什么需要Ajax?
Ajx不是一种新的编程语言,而是一种用于创建更好的以及交互性更强的Web应用程序的技术.
Ajax是一种独立于Web服务器软件的浏览器技术.
Ajax的工作原理如图所示,它使用JavaScript通过AJAX引擎向服务器发出请求并处理相应来布局更新也而不阻塞用户.AJAX引擎核心对象为XMLHTTPRequest,通过该对象,JavaScript可以在不重新加载整个页面的情况与Web服务器交换数据.
AJAX在浏览器与Web服务器之间使用异步数据传输(HTTP请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。
AJAX 可使因特网应用程序更小、更快以及更加友好。从而更完善了因特网应用程序。
什么叫异步?
当前页面发送一个请求给服务器,当前页面不需要等待服务器才能操作页面.发送请求后之后,当前页面可以继续浏览,操作.
什么叫局部刷新?
可以用两种方式部分刷新
1.iframe页面重载的方式.
这种方式虽然实现了部分刷新,但是页面的重载,所以也会来性能上的问题.
//第一步:在页面定义一个iframe
<iframe id="indexFrame" name="index" width="1000" height="800" frameborder="0" marginwidth="0" marginheight="0" scrolling="yes" style="margin-top:100px;"></iframe>
//第二步:设置iframe的src
var indexFrame = document.getElementById("indexFrame");
indexFrame.src="introduction.php";
//第三步,添加一个button的点击事件,当点击这个button,重新设置iframe的src,实现iframe里面的页面刷新.Iframe外面的内容不刷新
<button id="room" onclick='IndexClick("room")'>Click Me</button>
function indexClick(moduleKey){
var indexFrame = document.getElementById("indexFrame");
if(indexFrame == null){
indexFrame = parent.document.getElementById("indexFrame");
}
var url = "introduction.php";
switch(moduleKey){
case "introduction";
url = "introduction.php";
break;
case "room";
url = "room.php";
break;
default:{
}
}
indexFrame.src = url;
}
Ajax j技术的组成
1, JavaScript
2, XMLHttpRequest
AJAX的核心是JavaScript对象XMLHttpRequest。XMLHttpRequest对象用于在后台与服务器进行异步通信,通过HTTP传递请求和响应数据
3, XML
4, DOM
DOM是文档对象模型(Document Object Model)的英文字首缩写,它定义了操作文档对象的接口。
5, CSS
Ajax的通信
- 创建XMLHttpRequest对象
- 初始化请求参数
- 发送请求
- 捕获请求状态
- 判断请求状态
readyState属性值表示HTTP 请求的当前状态,在事件处理程序中一般根据该值进行不同处理。当XMLHttpRequest对象初次创建时,该属性值从0开始,直到接收到完整的HTTP响应,该属性值递增至4。 - 判断请求请求结果
- 获取响应文本
- 响应XML
Ajax提交请求和服务响应的原理
客户端的代码:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="Ajax.js"></script>
</head>
<body>
<div id="Test" style="background-color:#40eeee">
您的姓名2:<input type="text" id="testGetName" size="20" />
<button type="button" onclick="testGet();">Ajax Get请求</button>
</div>
<div id="Test" style="background-color:#ff6a00">
您的姓名3:<input type="text" id="testPostName" size="20" />
<button type="button" onclick="testPost();">Ajax Post请求</button>
</div>
<div id="myDiv" />
</body>
</html>
客户端JS代码:
var xmlhttp = createRequest();
function testGet() {
var fname = document.getElementById("testGetName").value;
xmlhttp.open("GET", "Test.ashx?fname=" + fname + "&random=" + Math.random() , true);
xmlhttp.onreadystatechange = callback;
xmlhttp.send(null);
}
function testPost() {
var fname = document.getElementById("testPostName").value;
xmlhttp.open("POST", "Test.ashx?" + "&random=" + Math.random() , true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
xmlhttp.onreadystatechange = callback;
xmlhttp.send("fname="+fname);
}
function createRequest() {
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp
}
function callback() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
*1var xmlhttp = createRequest(); 。
1.让服务端能够操作这个变量,如果定义成局部变量,则服务端返回response时,不能对xmlhttp的属性赋值。回调函数要求request是全局的,才能访问这个变量和它的属性值。
2.定义成全局变量后,可能出现两个请求或多个请求共享同一个请求对象。而这个请求对象只能存放一个回调函数来处理服务器响应。当服务器返回两个请求的Response后,可能会调用后指定的回调函数。所以可能有两个完全不同的服务器响应由同一个回调函数处理,而这可能并不是正确的处理。解决办法是创建两个不同的请求对象。*
AJAX GET和POST方式不同
//GET方式
function testGet() {
var fname = document.getElementById("testGetName").value;
xmlhttp.open("GET", "Test.ashx?fname=" + fname + "&random=" + Math.random() , true);
xmlhttp.onreadystatechange = callback;
xmlhttp.send(null);
}
//POST方式
function testPost() {
var fname = document.getElementById("testPostName").value;
xmlhttp.open("POST", "Test.ashx?" + "&random=" + Math.random() , true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
xmlhttp.onreadystatechange = callback;
xmlhttp.send("fname="+fname);
}
- 请求的URL中,POST方式可以添加键值对,也可以不添加
- GET方式中,send方法传递值无效。对于IE浏览器可以忽略send()方法的参数。但是对于FireFox,必须提供一个null引用,否则回调行为将不规律。这是在编写客户端脚本时你会发现的一个跨浏览器兼容的问题。
- POST可以用send方法发送额外信息.发送的信息存放在content中
- Post方式需要制定Request Header的类型.Get方式不需要指定
- GET方式将参数暴露在URL中,POST不暴露.
优势
1.使用异步方式与服务器通信,页面不需要重新加载,页面无刷新
2.按需取数据,减少服务器的负担
3.使得Web应用程序更为迅捷地响应用户交互
4.AJAX基于标准化的并被广泛支持的技术,不需要下载浏览器插件或者小程序,但需要客户允许JavaScript在浏览器上执行
5.浏览器的内容和服务端代码进行分离。页面的内容全部由JAVAScript来控制,服务端负责逻辑的校验和从数据库中拿数据。
缺点
1.安全问题:将服务端的方法暴露出来,黑客可利用这一点进行攻击
2.大量JS代码,容易出错
3.Ajax的无刷新重载,由于页面的变化没有刷新重载那么明显,所以容易给用户带来困扰——用户不太清楚现在的数据是新的还是已经更新过的;现有的解决有:在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等
4.可能破坏浏览器后退按钮的正常行为;
5.一些手持设备(如手机、PAD等)自带的浏览器现在还不能很好的支持Ajax
应用场景
1. 对数据进行过滤和操纵相关数据的场景
2. 添加/书节点
3. 添加/删除列表中的某一行记录
4. 切换下拉列表
5. 注册用户重名的校验