ajax学习心得

时间：2024-02-11 04:15:51 嘉欣2 学习经验

　　ajax学习心得篇一

　　新建一个html页布局如下：

　　<body>

　　<tr>

　　</td>

　　<td>

　　</td>

　　</tr>

　　<td>

　　<td>

　　</table>

　　</body>

　　如图：

　　然后在<head></head>里边添加如下的两个函数(该函数必须包含在<script></script>中)：

　　var xmlhttp = false;//全局xmlhttp对象

　　//作用：创建HttpRequest对象，该对象是Ajax的核心

　　function CreatHttpRequest() {

　　try {

　　xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");//新版本的IE创建IE兼容对象

　　} catch (e) {

　　try {

　　xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//使用旧版本的IE创建IE兼容对象

　　} catch (e1) {

　　return false;

　　}

　　//如果xmlhttp对象为创建成功，或者对象为undefined则使用通用的方法创建xmlhttp对象，Mozilla、Opera、Safari 和大部分非 Microsoft 浏览器已经IE7以后均采用此种方式创建。

　　if (!xmlhttp && xmlhttp == 'undefined') {

　　xmlhttp = new XMLHttpRequest();

　　}

　　function SayHello() {

　　CreatHttpRequest();

　　if (xmlhttp != null) {

　　var name = document.getElementById("txtname").value;//获得用户姓名

　　xmlhttp.open("Get", "SayHello.ashx?Name="+name+"&i="+Math.random(),true);//将用户姓名传给ashx页进行数据校验，i=Math.random()主要是为了避免get方式提交时受缓存的影响

　　xmlhttp.onreadystatechange = function () {

　　//xmlhttp.readState属性为说明Http请求状态，4为请求完毕，

　　//xmlhttp.status属性为从服务器发回的状态码，200为就绪

　　if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

　　alert(xmlhttp.responseText);//xmlhttp.responseText为从ashx页处理后的结果

　　}//每次 readyState 属性改变的时候调用的事件句柄函数,后边跟的是一个匿名的函数，每次属性改变都会调用该函数

　　}

　　xmlhttp.send();//只有调用了send()方法才能真正的向服务器发送请求，函数参数可以为null，一般也可不填

　　}

　　Else{

　　alert("HttpRequest对象创建失败");

　　}

　　</script>

　　下面说下SayHello.ashx页(即一般处理程序页)

　　代码如下：仅仅是读取用户输入的姓名，并返回"Hello"+用户姓名，这里主要做演示demo用，所以就没有从数据库读取信息。

　　public void ProcessRequest(HttpContext context)

　　{

　　var name = context.Request["Name"].ToString();

　　context.Response.Write("Hello !"+name);

　　}

　　结果：

　　Ok，到这里你已经实现了你的第一个Ajax程序了，赶快测试一下看看吧。通过测试你会发现，在页面并没有刷新的情况话，从我们的模拟后台数据库中读取到了相应的数据，返回了我们想要的结果，这样的用不体验是不是比一点击登陆页面就会瞬间变白重绘要好很多呢?如果数据检索的时间比较长页面就会持续的变白，这样的用户的体验效果会很差的。你有没有体验到Ajax带来的美感呢?我想现在你肯定有很多的不明白，下面我会给你细细的详解一番。

　　首先来看第一个函数，该函数的主要作用是生成一个HttpRequest对象，何为HttpRrequest对象呢?HttpRequest是AJAX的核心，它是在IE5中首先引入的，是一种支持异步请求的技术。Javascript可以及时向服务器提出请求和处理响应，获取到服务器的数据，然后再通过DOM将数据插入到页面中呈现。虽然名字中包含XML，但Ajax通讯与数据格式无关。具体的创建在函数里有具体的解析，这里就不再做重复的介绍了。

　　下面看第二函数，也就是实现AJAX的主体函数，在该函数中，我们先调用了CreateHttpRequest()函数，也就是先将全局变量xmlhttp实例化，然后获取用户的输入名。调用HttpRequest的open()方法，该方法只是用来初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。

　　该方法有三个参数第一个参数是说明Http方法，有两种形式一种是“get",另一个种是”post",两者的区别就相当于表单提交时如果使用get方法，就可以在url里看到提交的值，是显示的，不安全，post是隐式的，看不到提交的值，相对比较安全，上边的示例我们采用的是“get"方法，本文最后我会跟大家演示一下”post“方法。

　　第二个参数是一个url也就是后台要处理的页，也就是相对于执行代码的当前页面(使用绝对路径)，本例中是“SayHello.ashx?Name="+name+"&i="+Math.Random()，做过asp.net 开发的朋友相信对这个一定都不陌生，是的，这里就相当于querystring传值，把你需要传递的值通过这种方法传递进入，如果有多个值的话跟QueryString一样使用“&”分割开来，后边又跟了一个参数”i“这里采用Math.Random()产生随机数，主要是为了解决的浏览器缓存问题，这样没每次提交的数据都不会一样，很好的解决了缓存问题。

　　第三个参数为是否设置为异步，在这里我们当然选择是异步操作，设置为"true"即可。

　　同步与异步的区别如下：

　　同步请求：发生请求后，要等待服务器执行完毕才继续执行当前代码。

　　异步请求：发生请求后，无需等到服务器执行完毕，可以继续执行当前代码

　　紧跟着下边是HttpRequest的onreadystateChange属性，具体可以理解为每次 readyState 属性改变的时候调用的事件句柄函数，所以在其后边紧跟了一个匿名的函数

　　在该匿名函数里首先在if条件判断里又用到了HttpRequest的两个属性，分别介绍下，

　　第一个是HttpRequest.readyState,还记得我们在上边open()函数里设置的第三个参数，也就是是否设置为异步吗，我们设置的为true，也就是异步请求，所以在请求过程中javascript代码会继续执行，这时可以通过readyState属性判断请求的状态，当readyState = 4时，表示收到全部响应数据，属性值的定义如下：

readyState值	描述
0	未初始化；尚未调用open()方法
1	启动；尚未调用send()方法
2	已发送；但尚未收到响应
3	接收；已经收到部分响应数据
4	完成；收到全部响应数据

　　下面看第二个属性：HttpRequest.status ：由服务器返回的 HTTP 状态代码 200表示OK一切正常，可以进行下一步的操作，当然还有其他的一些状态码，比如大家所知的404、303等，这里就不再做过多介绍了，只要用到HttpReques.status,我们记的拿它与200相比就可以了。当然还有另外一种状态的表示方式：HttpRequest.statusText, 这个属性用名称而不是数字指定了请求的 HTTP 的状态代码，仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

　　然后我们看满足if条件时，执行的代码，这里边又用到了一个HttpRequest.responseText:

　　该属性的意思是如果满足了if()里的判断条件，则包含客户端接收到的HTTP响应的文本内容，如果不满足以上的readyState==4，则当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。上边也有介绍，这里就不再重复了。此外还有一个HttpRequest.reponseXML 属性，此属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应;此时，Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。

　　紧接下来要执行的是HttpRequest.send()函数，这个时候才真正的向服务器发送请求，send()方法接受一个参数，如果是用“get”的方式请求这里边可是设置为null也可以什么都写，因为“get"的方式所需传的值都通过url传递了，如果是”Post“的请求方式，则传递的参数可以写在send()里。

　　下面附上使用Post的请求方式的Ajax代码

　　function SayHello() {

　　alert("hell0");

　　CreatHttpRequest();

　　if (xmlhttp != null) {

　　var name = document.getElementById("txtname").value;

　　xmlhttp.open("Post", "SayHello.ashx", true);

　　xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//使用Post方式请求时必须要加上这句话

　　xmlhttp.onreadystatechange = function () {

　　if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

　　alert(xmlhttp.responseText);

　　}

　　xmlhttp.send("Name="+name+"&i="+Math.random());//传递所需的参数

　　}

　　到这里我已经基本上把HttpRequest的核心的东西给大家讲完了，通过这一章节的学习，我想你已经可以自如做到构建一个属于你的Ajax程序了，当然这些都只是些比较基础的Ajax的东西，这些都是原生态的Ajax，现在我们也可以使用JQuery实现Ajax，而且这个封装的也比较好，用起来也比较方便，但是我觉得我们还是有必要把Ajax的原理给搞清楚的，这样运用起来才会比较的自如。希望能对大家有所帮助，也希望大家多多指点!

　　ajax学习心得篇二

　　在使用AJAX容易出现的几个小问题

　　1.提交参数包含中文时,获取不到中文值

　　var keywords = escape(document.getElementById("keywords").value);//escape()解决中文参数

　　2.POST提交获取不到参数值

　　xmlHttp.setrequestheader("content-length",postdata.length);

　　xmlHttp.setrequestheader("content-type","application/x-www-form-urlencoded");

　　假如以上两句话就可以了

　　3:为了兼容大部分的浏览器，最好在创建XMLHttpRequest的时候加入完整的判断不要简单的用

　　var req; //定义变量，用来创建xmlhttprequest对象

　　function creatReq() // 创建xmlhttprequest,ajax开始

　　{

　　if(window.XMLHttpRequest) //非IE浏览器，用xmlhttprequest对象创建

　　{

　　req=new XMLHttpRequest();

　　}

　　else if(window.ActiveXObject) //IE浏览器用activexobject对象创建

　　{

　　req=new ActiveXObject("Microsoft.XMLHttp");

　　}

　　4:我经常犯的的一个错误就是xmlreq.onreadystatechange = CheckState();//制定相应的函数

　　这样写是错误的，函数的括号是不需要的。

Code

　　用AJAX的Get和Post调用Servlet的简单示例。

Code

　　看到的说明原文如下：

　　用AJAX来GET回一个页面时，RESPONSETEXT里面的中文多半会出现乱码，这是因为xmlhttp在处理返回的 responseText的时候，是把resposeBody按UTF-8编码进解码考形成的，如果服务器送出的确实是UTF-8的数据流的时候汉字会正确显示，而送出了GBK编码流的时候就乱了。解决的办法就是在送出的流里面加一个HEADER，指明送出的是什么编码流，这样XMLHTTP就不会乱搞了。

　　PHP:header('Content-Type:text/html;charset=GB2312');

　　ASP:Response.Charset("GB2312")

　　JSP:response.setHeader("Charset","GB2312");

　　AJAX ResponseXML 实例

　　在下面的 AJAX 实例中，我们将演示网页如何使用 AJAX 技术从数据库中读取信息。这次，这些从数据库中选取的数据将被转换为 XML 文档，然后我们将使用 DOM 来提取要显示的值。

　　AJAX 实例解释

　　上面的例子包含一个 HTML 表单，若干个保留所返回数据的 <span> 元素，以及指向一段 JavaScript 的链接：

　　<html>

　　<head>

　　</head>

　　<body>

　　<label>选择客户：

　　<option value="ALFKI">Alfreds Futterkiste</option>

　　<option value="NORTS ">North/South</option>

　　<option value="WOLZA">Wolski Zajazd</option>

　　</select></label>

　　</form>

　　</body>

　　</html>上面的例子包含了一个 HTML 表单，该表单带有一个名为 "customers" 下拉框。

　　当用户选取下拉框中的客户时，函数 "showCustomer()" 就会被执行。事件 "onchange" 会触发该函数执行。换句话说，每当用户改变下拉框中的值时，函数 showCustomer() 就会被调用。

　　下面列出了 JavaScript 代码。

　　AJAX JavaScript

　　这是存储在文件 "selectcustomer_xml.js" 中的 JavaScript 代码：

　　var xmlHttp

　　function showCustomer(str)

　　{

　　xmlHttp=GetXmlHttpObject();

　　if (xmlHttp==null)

　　{

　　alert ("Your browser does not support AJAX!");

　　return;

　　}

　　var url="getcustomer_xml.asp";

　　url=url+"?q="+str;

　　url=url+"&sid="+Math.random();

　　xmlHttp.onreadystatechange=stateChanged;

　　xmlHttp.open("GET",url,true);

　　xmlHttp.send(null);

　　}

　　function stateChanged()

　　{

　　if (xmlHttp.readyState==4)

　　{

　　var xmlDoc=xmlHttp.responseXML.documentElement;

　　document.getElementById("companyname").innerHTML=

　　xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue;

　　document.getElementById("contactname").innerHTML=

　　xmlDoc.getElementsByTagName("contname")[0].childNodes[0].nodeValue;

　　document.getElementById("address").innerHTML=

　　xmlDoc.getElementsByTagName("address")[0].childNodes[0].nodeValue;

　　document.getElementById("city").innerHTML=

　　xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;

　　document.getElementById("country").innerHTML=

　　xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue;

　　}

　　function GetXmlHttpObject()

　　{

　　var xmlHttp=null;

　　try

　　{

　　// Firefox, Opera 8.0+, Safari

　　xmlHttp=new XMLHttpRequest();

　　}

　　catch (e)

　　{

　　// Internet Explorer

　　try

　　{

　　xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

　　}

　　catch (e)

　　{

　　xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

　　}

　　return xmlHttp;

　　}showCustomer() 和 GetXmlHttpObject() 与上一节相同。stateChanged() 函数稍早前也在本教程中使用过。不过，这次我们通过 responseXML 以 XML 文档返回结果，并使用 DOM 来提取要显示的值。

　　AJAX 服务器页面

　　这个被 JavaScript 调用的服务器页面，是名为 "getcustomer_xml.asp" 的简单 ASP 文件。

　　该页面使用 VBScript 编写，针对 Internet 信息服务器 (IIS)。可以用 PHP 或其他服务器语言，简单地重写该页面。

　　请看在 PHP 中对应的例子(测试：缺具体页面)。

　　这段代码执行针对数据库的 SQL 查询，并以 XML 文档返回结果：

　　response.expires=-1

　　response.contenttype="text/xml"

　　sql="SELECT * FROM CUSTOMERS "

　　sql=sql & " WHERE CUSTOMERID='" & request.querystring("q") & "'"

　　on error resume next

　　set conn=Server.CreateObject("ADODB.Connection")

　　conn.Provider="Microsoft.Jet.OLEDB.4.0"

　　conn.Open(Server.Mappath("/db/northwind.mdb"))

　　set rs=Server.CreateObject("ADODB.recordset")

　　rs.Open sql, conn

　　if err <> 0 then

　　response.write(err.description)

　　set rs=nothing

　　set conn=nothing

　　else

　　response.write("<?xml version='1.0' encoding='ISO-8859-1'?>")

　　response.write("<company>")

　　response.write("<compname>" &rs.fields("companyname")& "</compname>")

　　response.write("<contname>" &rs.fields("contactname")& "</contname>")

　　response.write("<address>" &rs.fields("address")& "</address>")

　　response.write("<city>" &rs.fields("city")& "</city>")

　　response.write("<country>" &rs.fields("country")& "</country>")

　　response.write("</company>")

　　end if

　　on error goto 0

　　%>请注意上面的 ASP 代码中的第二行：response.contenttype="text/xml"。ContentType 属性为 response 对象设置了 HTTP 内容类型。该属性的默认值是 "text/html"。这次我们把内容类型设置为 XML。

　　然后我们从数据库中选取数据，并使用这些数据构建 XML 文档。

　　ajax学习心得篇三

　　AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。

　　主要包含了以下几种技术：

　　基于web标准(standards-based presentation)XHTML+CSS的表示;

　　使用 DOM(Document Object Model)进行动态显示及交互;

　　使用 XML 和 XSLT 进行数据交换及相关操作;

　　使用 XMLHttpRequest 进行异步数据查询、检索;

　　使用 JavaScript 将所有的东西绑定在一起。

　　Ajax应用程序的优势在于：

　　1. 通过异步模式，提升了用户体验

　　2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

　　3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

　　Ajax的工作原理

　　Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

　　在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性

　　工作原理：相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化，可以把一些服务器的工作转嫁给客户端。

　　传统的Http模式新的AJAX模式

　　AJAX的缺点：

　　无法回退，不能为每个页面建立标签，无法送出一个链接。

　　不能过分使用，客户端代码太大，也会影响性能。

　　异步方式需要用户接

　　IE以前版本不支持

　　安全考虑;在浏览器中可以看到源代码;建立XHR对象，必须包括URI。

看了ajax学习心得还看：

1.html5培训心得体会

2.企业学结范文3篇

3.初学者html5如何学习

4.学习c#心得范文4篇

5.c#学习计划