刚接触Ajax,功能十分强大,到现在为止已经是很受欢迎且又成熟的异步技术,下面就是作为小白的我对自己学习ajax的一些记录。
一、Ajax简介
1、Ajax是什么,是用来做什么的?
总结Ajax概念与作用为以下几点:
- Ajax: Asynchronous JavaScript and XML,异步的JavaScript和XML
- 当页面中表单中小部分更新获取数据时,早期的方式都会以“刷新跳转页面加载数据”方式进行。Ajax是在不需要重新加载页面的情况下,与服务器端交互更新页面数据,而不会让用户看到有URL跳转刷新,这就是一种异步技术手段。
- 众所周知,一次HTTP请求对应一个页面的加载,如果用户需要留在页面不进行跳转,则使用JavaScript更新页面,而ajax是一种能快速创建动态网页的技术。
2、Ajax的优势
- 异步请求,快速更新获取数据。适用于随时都需要更新数据的网站,如股票等。
- 良好的用户体验感,用户操作数据,更新数据无需过多的页面加载,加载过程可能还会遇到404错误等。
- 优化了浏览器与服务器之间传输的网络,节约了空间,减少了宽带占用。
- Ajax无需插件,兼容性强:ajax的应用程序与浏览器跟平台是无关的。
二、通过实例理解Ajax
1、简单的ajax入门实例
(1)创建ajax应用程序部分
创建项目为ajax_01->创建demo1.html页面。
(注意:此时的项目URL为:/ajax_01/demo1.html)
在页面demo1.html中Ajax XMLHttpRequest对象作用的应用程序为div标签。
<!-- Ajax程序 -->
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
(2)创建ajax请求的服务器端的数据
创建test.txt文件,其内容为:
Welcome Jian!
This only is an ajax test!
创建success.jsp页面
<h1>Welcome Jian</h1>
<p>Ajax跳转到success.jsp页面成功,URL没有改变,仍然为:/ajax_01/demo1.html</p>
(3)创建Ajax脚本
Ajax脚本为用Javascript代码书写
<script>
function loadXMLDoc()
{ //创建XMLHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//服务器状态发生变化时调用此函数。
xmlhttp.onreadystatechange=function()
{ //判断异步交互是否成功
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{ alert("异步请求成功!");
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
/*获取服务器端中test.txt文件中的内容
xmlhttp.open("GET","test.txt",true);
*/
//跳转至success.jsp页面,查看url是否有变化。
xmlhttp.open("GET","success.jsp",true);
xmlhttp.send();
}
</script>
(4)结果分析
demo1.html页面结果:
第一成功获取到了test.txt的内容,同时alter弹出。
第二查看页面URL无加载重新跳转,URL仍然是:/ajax_01/demo1.html
2、理解Ajax组成
(1)XMLHttpRequest对象:
XMLHttpRequest 是 AJAX 的基础,也是AJAX的核心,是用来负责AJAX进行异步服务器请求,在用AJAX技术操作数据时,其实就是操作XMLHttpRequest对应的属性业务。
创建XMLHttpRequest对象有两种方式。
现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)内置的支持的创建方式:
var xmlhttp = new new XMLHttpRequest();
老本版之前的创建XMLHttpRequest对象方式:
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
为了兼容性好,我们一般这样:
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
(2)AJAX发送服务器请求
ajax向服务器发送请求,其实就是XMLHttpRequest对象请求,使用XMLHttpRequest对象的open()与send()方法:
xmlhttp.open("method","url",async);
//GET请求send()无参数
//POST请求send(string)
xmlhttp.send();
参数说明:
- method:GET与POST方法,大部分的情况都使用GET,因为简单且速度快。POST没有数据量的限制,所以向服务器发送大量数据可以用POST,同时在用户输入的字符中含有未知的字符时,也需要用POST。
- url:文件在服务器所在的地址。
- async:选择异步(true)还是同步(false)。
GET请求:一般用于获取/查询资源信息
//请求资源url:demo_get.html
xmlhttp.open("GET","/ajax_01/test.txt",true);
xmlhttp.send();
这里需要注意ajax缓存问题:Ajax页面缓存是对一些重复的数据进行缓存,从而提升效率。主要是是对静态页面(css、js、图片、配置文件)的缓存,从而提高页面的响应速度。针对同一个URL,ajax从缓存中拿数据,并不会更新URL中拿到的数据
比如:在此之前我们获得test.txt的数据
我们已经在服务端后台对tes.txt文件进行修改,添加“It’s version 2.0”
刷新页面,重新加载仍然为第一版本。
解决办法缓存办法:
最常用的就是在url中添加参数(随机数或时间戳 )保证URL唯一
xmlhttp.open("GET","test.txt?param="+ Math.random(), true);
xmlhttp.send();
获得了版本2:并且URL唯一
POST请求:一般用于更新资源信息。
xmlhttp.open("POST","/ajax_01/login.jsp",true);
xmlhttp.send();
POST请求可以设置Http请求头部setRequestHeader():通常在HTTP协议里,客户端像服务器取得某个网页的时候,必须发送一个HTTP协议的头文件,告诉服务器客户端要下载什么信息以及相关的参数。
xmlhttp.open("POST","/ajax_01/login.jsp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=Jian&password=123");
在浏览器中查看网络状态:
(3)AJAX服务器响应
AJAX服务器的响应,主要是XMLHttpRequest对象的responseText与responseXML两个属性
- responseText:获得字符串形式的响应数据
- responseXML:获得 XML 形式的响应数据。