Ajax入门
2017-11-30 本文已影响0人
at小宇
来自网页
一、 Ajax简介
Ajax(asynchronous javascript and xml)是异步的javascript和xml，因此需要浏览器允许javascript运行。Ajax可以在不刷新整个网页的情况下更新网页的部分内容。2005年，Google使用Ajax创建出的页面极其生动，推动了Ajax的流行，现今新浪微博、Google地图等都使用了Ajax技术来设计更加友好丰富的页面。
二、Ajax交互
Ajax和服务器的交互如下：
- 浏览器创建XMLHttpRequest对象
- 浏览器请求服务器上的数据
- 浏览器发送XMLHttpRequest请求
- 服务器响应XMLHttpRequest请求
- 服务器返回浏览器请求的数据
- 浏览器运行javascript解析服务器返回的数据并更新页面内容![ajax.gif]
来自网页
三、Ajax实例
-
Ajax代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ajax Example</title>
<script>
function load()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "ajax.php", true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id = "myDiv">use Ajax to modify text</div>
<button type = "button" onclick = "load()">modify text</button>
</body>
</html>
代码解析：
对应Ajax交互章节：
1.单击button按钮，事件调用load函数(Ajax开始了)
2.创建一个XMLHttpRequest对象
3.调用open方法异步请求ajax.php（只打印一句话，参见如下ajax.gif）
4.调用send方法向服务器发出请求
5.等待服务器响应，读取服务器响应结果
6.更改页面文本内容
-
Ajax渣渣效果演示
ajax.gif
四、Ajax小结
上文的Ajax实例演示效果很渣，打扰了，这完全没有体现Ajax的强大功能，比如百度浏览器的文本框输入弹出提示，新闻页面天气的动态查询更新等等。但是Ajax的基本交互流程是相同的，以此入门，日后再好好体验Ajax的强大功能。
