Ajax学习之小结

ajax:
 * 同步交互和异步交互:
  * 同步交互:客户端发送请求——>等待服务器端处理——>接收响应,这个过程客户端不能做任何其他事情,这种模式叫做同步交互
  * 异步交互:客户端发送请求——>等待服务器端处理——>接收响应,这个过程客户端不用等待结果,可以做其他事情,这种模式叫做异步交互
  
  * ajax的定义:允许客户端与服务器进行通信,而无须刷新整个页面的技术叫做ajax。
 
  * 对比传统web模式与ajax模式的区别:
      * 传统web模式:客户端与服务器通信,交互的是整个页面
      * ajax模式:客户端与服务器通信,交互的是数据层面的
  
  * ajax的工作原理:在客户端与服务器进行通信的时候,客户端的请求首先发送给"ajax引擎",再由"ajax引擎"发送到服务器端
 
  * XMLHttpRequest对象:是使用ajax技术的关键
 
  * 实现ajax的步骤:
      * 创建XMLHttpRequest对象
      * 获取xmlhttpQequest对象

* 注册监听
      * 利用XMLHttpRequest对象的onreadystatechange属性来监听服务器的通信状态:
      * 服务器的通信状态具体由XMLHttpRequest对象的readyState属性来获取
        * readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
          0 代表未初始化。 还没有调用 open 方法
          1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用
          2 代表已加载完毕。send 已被调用。请求已经开始
          3 代表交互中。服务器正在发送响应
          4 代表完成。响应发送完毕
     * 再利用XMLHttpRequest对象的另一个属性status,来获取访问服务器端是否正确
        * 常用状态码及其含义:
          404 没找到页面(not found)
          403 禁止访问(forbidden)
          500 内部服务器出错(internal service error)
          200 一切正常(ok)
          304 没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改 )
   
     * 接收服务器的响应数据:
          * 文本格式:利用XMLHttpRequest对象的responseText属性来接收;
          * xml格式:利用XMLHttpRequest对象的responseXML属性来接收;
          * json格式:利用XMLHttpRequest对象的responseText属性来接收,再利用eval()函数进行转换。
          * 利用"{}"开始和结尾的,相当于map集合
          * 利用"[]"开始和结尾的,相当于数组
     
     * 与服务器建立连接
          * 利用XMLHttpRequest对象的open(method,url,asynch)方法
          * method:请求类型,"GET"或者"POST"
          * url:请求路径
          * asynch:是否异步加载,true是异步加载
    
     * 如果请求类型时"POST"方式的话,需要设置请求首部信息
          * 利用XMLHttpRequest对象的setRequestHeader()方法
     * xhr.setRequestHeader("Content-type","application/x-www-form-urlencode")
    
     * 向服务器发送请求数据
          * 利用XMLHttpRequest对象的send()
          * 如果是"GET"请求类型的话,send()方法向服务器发送请求数据,服务器接收不到
          * 如果是"POST"请求类型的话,send()方法向服务器发送请求数据,服务器可以接收
  
  
  
     * 服务、服务器、中间件、servlet:
         * 服务:发布后的工程
         * 服务器:硬件承载容器,实际上就是电脑硬件
         * 中间件:tomcat、weblogic[oracle]、webshpere[IBM]
         * servlet:服务上,具体处理相关内容的文件

时间: 2024-09-30 01:59:38

Ajax学习之小结的相关文章

Ajax学习教程在线阅读

  1.什么是AJAX ?(1) 2.什么是AJAX ?(2) 3.什么是AJAX ?(3) 4.什么是AJAX ?(4) 5.Ajax基础教程(1)-Ajax简介 1.1 Web应用简史 6.Ajax基础教程(1)-Ajax简介 1.2 浏览器历史 7.Ajax基础教程(1)-Ajax简介 1.3 Web应用的发展历程 8.Ajax基础教程(1)-Ajax简介 1.3 Web应用的发展历程(2) 9.Ajax基础教程(1)-Ajax简介 1.3 Web应用的发展历程(3) 10.Ajax基础教

[ajax 学习笔记] json数据格式

之前写过ajax传送数据可以用普通文本和XML两种格式.这里记一下json数据格式. json:javascript object notation. 之前分析过,用文本和XML传送数据各有优劣.而json可以轻松地将javascript对象转换成可以随时发送的数据. 一个json数据例子: var people = { "programmers": [ { "firstName": "Brett", "lastName":&

AJAX学习整理二之简单实例

做了几个简单的实例,加载txt文本内容.加载xml文件内容,把xml文本内容转换成html表格显示.废话不多说,直接贴代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head>     <title>通过ajax获取文本内容</title>     <meta charset="utf-8">     <scr

Ajax 学习初步

Ajax学习 第一步.创建 XMLHTTPRequest 对象 为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象.如果支持,则创建 XMLHttpRequest 对象.如果不支持,则创建 ActiveXObject : var xmlhttp; if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera,Safari xmlhttp=new XMLHttpRe

dwr实现ajax学习

前一段时间看了一点dwr实现ajax的介绍信息,一直想找个机会看看到底怎么用.今天起了个早,试了一下感觉还挺好用的. 下面是我的一点学习总结: 一.配置DWR(http://getahead.org/dwr/getstarted)1.将dwr.jar包放在web-info/lib目录下2.编辑web.xml文件,添加servlet <servlet>  <servlet-name>dwr-invoker</servlet-name>  <display-name&

Ajax学习笔记(二)

二.prototype库详解 1.prototype库的使用 //导入下载好的prototype.js文件 <script type="text/javascript" src="prototype.js"></script> //在自己的js中直接使用Prototype对象 <script type="text/javascript"> document.writeln("Prototype库的版本

Ajax学习心得

Ajax学习心得 大致学了下Ajax,才知道它不是某种编程语言,而是一种在无需加载整个页面的情况下能够更新部分网页的技术.了解了它的功能后觉得这真是一种好的技术,这得给前端和运维省多少力啊! 传统的网页没有使用Ajax技术,当更新网页内容时要重新加载页面来重写页面,如果是整个网站,这工作量无疑是巨大的,但有了Ajax技术,我们在后台进行表单设计时,加入相关代码,实现异步输入输出,局部更新,这就使工作变得轻便.例如,现在很多的知名网站,像腾讯,新浪,谷歌,百度地图等等,都使用了这种技术. 而要学习

[ajax 学习笔记] ajax 的服务器响应

在上一篇[ajax 学习笔记] ajax初试中,简单了解了一下ajax. 我是参考AJAX详解.chm学习的,资源已上传.参考链接:Ajax 专题 今天又学习了ajax中关于服务器响应的一些知识. ajax中服务器的响应是通过响应函数将服务器返回的数据呈现到页面的.服务器的响应体现在服务器响应回调函数中. 在上一篇的例子中,响应函数为: function updatePage(){ if(xmlHttp.readyState == 4){ //http就绪状态 if(xmlHttp.status

ASP.net中的AJAX学习记录六 无刷新的数据编辑(GridView和DetailsView结合实例)(转)

本篇博客是仿照书中实例,实现GridView和DetailsView结合无刷新的数据编辑效果,页面效果:当点击GridView1的行或换页时,都会引发DetailsView1的数据绑定显示至页面,同时当使用DetailsView1编辑.删除.添加时,也会引起GridView1的重新绑定,整体页面实现无刷新. 页面布局: 1.新建AJAX窗口,命名为:"NoRefreshEdit.aspx".要想实现页面无刷新编辑,就必须使用两个Updatepanel. 2.在NoRefreshEdit