学习Ajax——入门篇01

刚接触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.htmlxmlhttp.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 形式的响应数据。