AJAX
AJAX →Asynchronous JavaScript and XML
是一种使用现有标准的新方法。
有点难:在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
AJAX 应用:
1、运用 XHTML+CSS 来表达资讯;
2、运用 JavaScript 操作 DOM(Document Object Model)来执行动态效果;
3、运用 XML 和 XSLT 操作资料;
4、运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步资料交换;
5、注意:AJAX 与 Flash、Silverlight 和 Java Applet 等 RIA 技术是有区分的。
AJAX向服务器发送请求请求
通过open() 和 send() 方法向服务器发送请求
open(method,url,async)→open(请求的类型;GET 或 POST , 文件在服务器上的位置 , true(异步)或 false(同步))
send(string)→send(仅用于 POST 请求)
//GET和POST的区别:
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。然而,在以下情况中,请使用 POST 请求:
1)无法使用缓存文件(更新服务器上的文件或数据库)
2)向服务器发送大量数据(POST 没有数据量限制)
3)发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>
onreadystatechange 事件
ORSC事件是什么:当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange事件readyState 属性存有 XMLHttpRequest 的状态信息。
☆ XMLHttpRequest 对象的三个重要的属性☆
onreadystatechange:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
==→0: 请求未初始化
==→1: 服务器连接已建立
==→2: 请求已接收
==→3: 请求处理中
==→4: 请求已完成,且响应已就绪
status:200: “OK” / 404: 未找到页面
AJAX ASP/PHP
下面的例子将为您演示当用户在输入框中键入字符时,网页如何与 web 服务器进行通信: 请在下面的输入框中键入字母(A - Z)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>在输入框中尝试输入字母 a:</h3>
<form action="">
输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>提示信息: <span id="txtHint"></span></p>
</body>
</html>
————————————————