ajax学习

1.传统的web应用
  传统的web应用允许用户填写表单(form),当提交表单时就向Web服务器发送一个请求。服务器接收并处理传来的表单,然后返回一个新的网页。这个做法浪费了许多带宽,因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。如果严重超过响应时间,服务器干脆告诉用户页面不可用,如果只是想改变页面一小部分的数据,那么如何不必重新加载整个责面,减少用户等待的时间是急需解决的问题。要解决这样的问题,除了更优秀的程序设计、编码优化和调整服务器之外,还可以采用Ajax技术。

2.改变传统web应用的ajax

  AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
  AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
  AJXA不是一门新的技术,而是把一些老的技术结合起来有了新的用法.

  交互部分数据,局部刷新页面

  AJAX 是与 服务器交换数据 并 更新部分 网页的艺术,在不重新加载整个页面的情况下。
  AJAX = 异步 JavaScript 和 XML。
  AJAX 是一种用于创建快速动态网页的技术。
  通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
  传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
  有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等

  特点: 与服务器数据交互
    部分刷新页面

  异步交互,局部刷新

  注意:理解 同步 和 异步


异步:异步的ajax请求,执行结果为:先执行alert(2)再执行alert(1), 异步的意思就是说一旦conn.open请求一发出,前端不去等待它的响应便执行后面的代码,所以alert(2)先执行了,然后当响应response到达以后才执行alert(1);

同步:同步的ajax请求,执行结果为:先执行alert(1)再执行alert(2), 同步的意思就是说一旦conn.open请求一发出,前端就去等待它的响应,响应完成以后,alert(1)先执行了,然后alert(2);


3.ajax的特点
  ajax的特点总结起来八个字: 异步交互 局部刷新
3.1 理解异步交互
3.2 理解局部刷新

虽然Ajax可以设置成同步的 但是一般都是设置为异步的

4.Ajax的四种关键元素/技术
  1)JavaScript JavaScript是通用的脚本语言,用来嵌入在某种应用之中.web浏览器中嵌入的JavaScript解释器允许通过浏览器的很多内建功能进行交互.Ajax应用程序是使用JavaScrpit编写的
  2)CSS(Cascading Stytle Sheets,层叠式样式表) CSS为Web页面元素提供了一种可重用的可视化样式的定义方法.他提供了简单而又强大的方法,以一致的方式定义和使用可视化样式.在Ajax应用中,用户界面的样式可以通过CSS独立修改.
  3)DOM(文档对象模型):Dom以一组可以使用JavaScrpit操作的可编程对象展现出web页面的结构,通过使用脚本修改Dom,Ajax应用程序可以在运行时改变用户界面,或者高效的重绘页面中的某个部分
  4)XMLHttpRequest对象:XMLHttpRequest对象允许Web程序员从web服务器以后台活动的方式获取数据.数据格式通常是XML,但是也可以很好的支持任何基于文本的数据格式.尽管XMLHttpRequest对于完成这件工作来说是最为灵活和通用的工具.
其中CSS,DOM,JavaScrpit都不是新面孔,以前结合在一起称为动态HTML,或者简单DHTML

1,创建ajax对象
2,准备请求
3,准备处理响应的程序
4,发送请求


5.XMLHttpRequest : 创建Ajax对象

  //新版浏览器创建ajax对象
  if(window.XMLHttpRequest){
    ajax = new XMLHttpRequest();
  }
  //老版浏览器创建 ajax对象
  if(window.ActiveXObject){
    ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }

6.XMLHttpRequest对象相关的操作和方法
1) 创建XMLHttpRequest对象的代码:

创建Ajax对象,分浏览器:
  ie:var xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  如果不是ie:var xmlHttpRequest = new XMLHttpRequest();

  var xmlHttp;
  function createXMLHttpRequest(){
    //本地浏览器是否支持ActiveX对象,返回对象为true,返回null为false
    if(window.ActiveXObject){
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      //本地浏览器是否支持XMLHttpRequest对象
    }else if(window.XMLHttpRequest){
      //作为一个JavaScript对象来创建
      xmlHttp = new XMLHttpRequest();
    }
  }

2) XMLHttpRequest对象的方法和属性

a)open(String method,String url,boolean asynch);

准备请求:
url
get/post
true/false
true:异步
false:同步

var ajax = fun();//1,创建ajax对象
ajax.open("get","abcServlet?name=tom",true);
//2,准备请求
//接受反馈 //3,准备响应
ajax.onreadystatechange=function(){
//回调函数
if(ajax.status==200 && ajax.readyState==4){
//获取服务器反馈
//获取 数据
var data = ajax.responseText
var dataxml = ajax.responseXML
// 利用js做dom操作
}
}
//4,发送请求
ajax.send();
建立对服务器连接的调用,
method参数可以是GET、POST或者PUT。
url参数可以是相对URL或者绝对URL,
asynch来指示调用采用的是同步还是异步,默认为true,采用异步调用,如果为false,处理就会等待,直到服务器返回响应为止。
open("get","test",false);

b) onreadystatechange
  每次XMLHttpRequest对象的状态改变时都会触发这个事件处理器,
  这个事件处理器通常会调用一个JavaScript函数去执行相关的代码。

  ajax.onreadystatechange=function(){

  }


c)send(content):post-->请求的数据源
  向服务器发出异步请求,如果请求是异步的,
  这个方法就会立即返回,否则它会等待直到接受到服务器的返回响应为止。
  输入的content可以是DOM的实例对象、输入流或者字符串,
  传入这个方法的内容作为请求体的一部分发送。若send(null)则请求体为空。
  如果是post提交,就可以使用send传数据域
  post:-->send("name=123&passwrod=123")

  在回调函数里面:
d)readyState
  XMLHttpRequest对象的状态变化。
  readyState == 0
  0 (未初始化) 新的XMLHttpRequest对象实例已建立,但是尚未初始化(尚未调用open方法)
  1 (正在加载) 新的XMLHttpRequest对象实例已建立,尚未调用send方法 。
  2 (已经加载) send方法已调用,但是当前的response状态未知
  3 (交互中) 客户端已接收部分response中的信息,但是没有全部接受,这时通过responseXML或者responseText获取部分数据会出现错误,
  4 (完成) 数据接收完毕,此时可以通过responseXML或者responseText获取完整的应答信息。

e) status
  服务器的HTTP状态码(200=OK 404=Not Found IE(1223)
  FireFox(204)=服务器没有信息返回)


f)responseText
  服务器的响应,表示为一个文本内容。

g)responseXML
  服务器的响应,表示为一个XML文档。


补充:
h)abort()
  停止当前的请求
i)setRequestHeader(String header,String value)
  这个方法为HTTP请求中一个给定的首部字段设置值,这个方法必须在调用open()方法之后才能调用。
j)getAllResponseHeaders()
  把HTTP请求的所有响应首部作为键/值对返回
k)getResponseHeader("header")
  返回指定首部的串值
l) statusText
  HTTP状态码的相应文本(OK或者Not Found)

3) 请求返回到浏览器-->了解
  Content-Type设置为text/xml,XMLHttpRequest对象只能处理text/html的结果。
  在另外一些复杂的示例中,响应可能涉及更广,还包括JavaScript、DOM管理以及
  其它相关的技术。需要说明,你还要设置另外一些首部,使浏览器不会在本地缓存结果。
  response.setHeader("Cache-Control","no-cache");
  response.setHeader("Pragma","no-cache");

4) 回调函数
对于XMLHttpRequest对象,onreadystatechange属性
存储了回调函数的指针。当XMLHttpRequest对象的
内部状态发生变化时,就会调用这个回调函数。
  function ajaxCallBack(){
    if(xmlHttpRequest.readyState==4){
      if(xmlHttpRequest.status==200){
        //拿到接收好的数据
        var data = xmlHttpRequest.responseText;
        //进行局部刷新
      }
    }
  }

5) 常用提交方式
  a) POST
    xmlHttp.open("POST",url,true);
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
    xmlHttp.onreadystatechange=ajaxCallback;
    xmlHttp.send("username=tom&password=123");
    注意: 此时parameter在请求体中
  b) GET
    xmlHttp.open("get",url+"?username=123",true);
    xmlHttp.onreadystatechange=ajaxCallback;
    xmlHttp.send(null);

 

1xx:信息响应类,表示接收到请求并且继续处理
2xx:处理成功响应类,表示动作被成功接收、理解和接受
3xx:重定向响应类,为了完成指定的动作,必须接受进一步处理
4xx:客户端错误,客户请求包含语法错误或者是不能正确执行
5xx:服务端错误,服务器不能正确执行一个正确的请求

100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到,但返回信息为空
205——服务器完成了请求,用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET,但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码,现行版本中不再使用
307——申明请求的资源临时性删除
400——错误请求,如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许,没有权限访问
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖,请求资源不可访问
407——类似401,用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态,请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求
500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用,有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载,服务器使用另一个关口或服务来响应用户,等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本

posted @ 2020-03-19 17:24  whhhd  阅读(84)  评论(0编辑  收藏  举报