龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

ajax工作原理图文详解

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
分享一篇关于ajax工作原理图文详解,告诉你ajax是怎么与服务器实现无刷新效果的。 -ajax a.全称:Asynchronous Javascript and Xml(异步javascript 和 xml) b.含义:一种创建交互式网页应用的网页开
分享一篇关于ajax工作原理图文详解,告诉你ajax是怎么与服务器实现无刷新效果的。

-ajax
       a.全称:Asynchronous Javascript and Xml(异步javascript 和 xml)
       b.含义:一种创建交互式网页应用的网页开发技术
       c.功能:实现局部刷新,减少服务器压力
       d.工作原理:
           图片:web.JPG
    传统Web应用允许用户填写表单,当提交表单时向Web服务器发送一个HTTP请求。服务器接收并处理传来的表单,
然后返回一个新的网页到用户浏览器。如图所示就是传统Web应用的工作原理。使用传统Web应用时若要改变页面的
一小部分数据,需要重新加载整个页面,这是一种不友好的用户体验。而且由于每次应用的交互都需要向服务器发送
请求,应用的响应时间依赖于服务器的响应时间,这可能导致用户花费较长的等待时间。
             图片:ajax.JPG
    与传统Web应用不同的是,AJAX采用异步交互过程。AJAX可以仅向服务器发送并取回必须的数据,它使用SOAP
(简单对象访问协议)或其他一些基于XML的Web Service 接口,并在客户端采用JavaScript处理来自服务器的响应。
用户在页面上获得的数据是通过AJAX引擎提供的,由于页面不需要与服务器直接交互,所以客户端浏览器不需要刷
新页面就能获得服务器的信息,提高了页面的友好度。

 主要:

 代码如下
  function CallServer(value){
     CreateXMLHttpObject();               //创建一个xmlhttp对象
     xmlhttp.open("GET","for.php?id="+value,true); //创建一个http请求
     xmlhttp.onreadystatechange=UpdatePage;        //定义响应的函数
     xmlhttp.send(null);               //发送请求
  }


 注意:
  1.取得文本框的内容
          a.document.myform.user.value(js文件里)
          b.this.value(html文件里)
  2.注意字符集
          如果你输出结果包括中文,要注意字符集的问题。即js文件的字符集跟php文件的字符集应可转换
          例:本人使用的是easyeclipse,新建的ajax.js文件的字符集默认为ISO-8859-1,这样的话php文件
     就应该为utf而不能为gbk,可能是gkb跟ISO不能转换的缘故。而utf比较'通吃'.当然,你可以把
     js文件转换为utf8,这样就避免许多问题了。


精彩图集

赞助商链接