您的位置:首页 > Web前端 > JavaScript

什么是AJAX【Asynchronous异步的JS和XML】,工作原理与特点

2018-03-09 22:17 267 查看
(1)什么是同步:
             请求1->响应1->请求2->响应2->
       Web1.0时代
 
   (2)什么是异步:
             请求1->请求2->请求3->响应1->响应2->响应3->
             请求1->响应1->请求2->请求3->响应2->响应3->
             Web2.0时代,可以同时发生多个请求,同时等待响应。
       项目中:Web1.0为主(整个浏览器刷新),Web2.0为辅(浏览器局部刷新)
 
   (3)什么是AJAX
                   客户端(特指PC浏览器)与服务器,可以在【不必刷新整个浏览器】的情况下,与服务器进行异步通讯的技术      
             即,AJAX是一个【局部刷新】的【异步】通讯技术。
             AJAX不是全新的语言,是2005年Google公司推出的一种全新【编程模式】,不是新的编程语言
 
   (4)不用刷新整个页面便可与服务器通讯的办法有:
      (A)Flash/ActionScript
      (B)框架Frameset
      (C)iFrame(内嵌入框架)
      (D)XMLHttpRequest(非IE浏览器)和ActiveXObject(IE浏览器)
                  背景:早在IE5时,微软就开发出了第一个异步通讯对象,叫ActiveXObject对象,
                  Firefox等其它浏览器厂商也慢慢引入异步通讯对象,叫XMLHttpRequest对象,function createAJAX(){
var ajax = null;
try{
ajax = new ActiveXObject("microsoft.xmlhttp");
}catch(e1){
ajax = new XMLHttpRequest();
}
return ajax;
}

                  IE的高版本,也将这个异步对象取名叫XMLHttpRequest对象,但IE有向下兼容问题,
              也可以使用ActiveXObject对象。
                              无需第三方jar包,现代中高版本浏览器中内置了这个异步通讯对象,只需通过JavaScript就可以创建
                    注意:所有浏览器中都内置了异步对象,在默认情况下,该异步对象并没有创建出来

 (7)AJAX开发步骤
             步一:创建AJAX异步对象,例如:createAJAX()
           步二:准备发送异步请求,例如:ajax.open(method,url)
             步三:如果是POST请求的话,一定要设置AJAX请求头,例如:ajax.setRequestHeader()
                   如果是GET请求的话,无需设置设置AJAX请求头
             步四:真正发送请求体中的数据到服务器,例如:ajax.send()
步五:AJAX不断的监听服务端响应的状态变化,例如:ajax.onreadystatechange,后面写一个无名处理函数      
             步六:在无名处理函数中,获取AJAX的数据后,按照DOM规则,用JS语言来操作Web页面      
 
   (8)AJAX适合用在什么地方
             AJAX【适合】不用来传递大量数据,而只用来【传递少量数据】,在用户的【体验】上,【更加人性化】
             AJAX是一个和服务器无关的技术,即服务器可使用:JavaEE,.NET,PHP,。。。这些技术都可
             AJAX只管向服务器发送请求,同时只管接收服务器的HTML或XML或JSON载体响应
       服务端不能使用转发或重定向到web页面,因为这样会起浏览器全面刷新
             即只能以流的方式响应给浏览器

//注意:在Web2.0时代,即异步方式下,不能用转发或重定向       //因为:转发或重定向会引起浏览器全部刷新,而不是局部刷新       //所以得用以输出流的方式将服务器的结果输出到浏览器
九)XMLHttpRequest(即:AJAX)对象常用事件,方法和属性
   (1)事件:
       ajax.onreadystatechange:表示AJAX异步对象不断监听服务端的响应,
        是由服务器程序触发,不是程序员触发
 
   (2)属性:
             ajax.readyState==0:表示AJAX异步对象已创建好,但还没有调用open()方法
 
             ajax.readyState==1:表示AJAX异步对象已调用open()方法,但还没有调用send()方法
 
             ajax.readyState==2:表示AJAX异步对象已调用send()方法,但请求还没有到达服务器端
 
             ajax.readyState==3:表示服务端已接收到AJAX异步对象的请求,正在处理响应中。。。
 
ajax.readyState==【4】:表示AJAX异步对象已经完完全全接收到了服务器的响应信             息,但接收到的数据不一定都正确
上述5种状态不是所有浏览器都相同,但状态4每种浏览器都相同
 
        ajax.status==200:表示AJAX异步对象接收到响应码,如果是200的话,表示一切正常
        
       ajax.responseText:表示从AJAX异步对象中获取HTML载体中的数据
 
             ajax.responseXML:表示从AJAX异步对象中获取XML载体中的数据
 
   (3)方法:
             ajax.open(method,url,可选的boolean值)
             AJAX异步对象准备发送异步请求
             参数一:以什么方式发送,常用的用GET或POST,大小写不敏感
             参数二:发送到什么地方去,常用Servlet或Struts2或SpringMVC来接收,
这里只限于JavaEE学科       
             参数三:默认值为true,表示AJAX对象以【异步】的方式提交到服务端
                     如果设置为false,表示AJAX对象以【同步】的方式提交到服务端
 
       ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")
             表示将请求体中的内容,按照UTF-8的方式进行编码,只针对POST请求有效  
   ajax.send(content)
             AJAX异步对象真正发送异步请求
             参数一content:表示HTTP【请求体】中的内容
                   如果是GET方式:content =null,如果强行传值到服务器,服务端收不到,返回NULL
                   如果是POST方式:content !=null,例如:username=jack&password=123&role=admin
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐