AJAX--javascript

什么是AJAX

  AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”

特点:1、与服务器异步交互; 2、 浏览器页面局部刷新;

同步交互与异步交互

  • 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
  • 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。

AJAX的优缺点

优点:

  •   AJAX使用Javascript技术向服务器发送异步请求;
  •   AJAX无须刷新整个页面;
  •   因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高;

缺点:

  •   AJAX并不适合所有场景,很多时候还是要使用同步交互;
  •    AJAX虽然提高了用户体验,但无形中向服务器发送的请求次数增多了,导致服务器压力增大;
  •    因为AJAX是在浏览器中使用Javascript技术完成的,所以还需要处理浏览器兼容性问题;

AJAX核心(XMLHttpRequest)

  AJAX就是在Javascript中多添加了一个对象:XMLHttpRequest对象。所有的异步交互都是使用XMLHttpRequest对象完成的

各个浏览器对XMLHttpRequest的支持也是不同的!

  大多数浏览器都支持DOM2规范,都可以使用:var xmlHttp = new XMLHttpRequest()来创建对象;

  但IE有所不同,IE5.5以及更早版本需要:var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”)来创建对象;

  而IE6中需要:var xmlHttp = new ActiveXObject(“Msmxl2.XMLHTTP”)来创建对象;

  而IE7以及更新版本也支持DOM2规范。

步骤

1) 创建XMLHttpRequest对象、XMLHttpRequest()

2) 打开XMLHttpRequest与服务器的连接  ,调用XMLHttpRequest的open()

  open(method, url, async):

  •   method:请求方式,通常为GET或POST;
  •   url:请求的服务器地址,例如:/ajaxdemo1/AServlet,若为GET请求,还可以在URL后追加参数;
  •   async:这个参数可以不给,默认值为true,表示异步请求;  false:表示同步

3) 发送请求,    ,调用XMLHttpRequest的send()  、 xmlHttp.send(null);

  注意:若没有参数,需要给出null为参数!若不给出null为参数,可能会导致FireFox浏览器不能正常发送请求!

4) 接收服务器的响应

  XMLHttpRequest绑定了一个事件, 状态改变的事件

  XMLHttpRequest对象有一个onreadystatechange事件,它会在XMLHttpRequest对象的状态发生变化时被调用

0:初始化未完成状态,只是创建了XMLHttpRequest对象,还未调用open()方法;

1:请求已开始,open()方法已调用,但还没发送请求

2:请求发送完成状态,send()方法已调用;

3:开始读取服务器响应;

4:读取服务器响应结束。

  通过XMLHttpRequest对象的readyState属性来得到XMLHttpRequest对象的状态

  可以通过XMLHttpRequest对象的status属性得到服务器的状态码, HTTP状态码, 关注200,表示成功

5) 获取服务器的响应的数据

          通过XmlHttpRequest对象responseText属性获取

发送的GET请求: 可以通过url传递参数、也可以通过send方法

发送的POST请求:   请求参数必须通过send方法发送

  一定设置请求体的编码:xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

但在使用AJAX发送请求时,就没有默认值了,这需要我们自己来设置请求头:)

设置请求头, 一定要在open()之后
html代码:

<h1 style="height:200px; width:400px; background-color: red;">第一个AJAX页面</h1>
<div id="box" style="height: 200px; width: 300px; background-color: green;" >我是div, 我准备学习AJAX</div>
<button type="button" onclick="changeBox()">按钮</button>

javascript代码

<!--浏览器兼容问题-->
<script type="text/javascript">
         //创建XMLHttpRequest对象的函数
         function  createXmlHttpRequest(){
               var xmlHttp;
               // 适用于大多数浏览器,以及IE7和IE更高版本
               try{
                   xmlHttp = new XMLHttpRequest();
               } catch (e) {
                   // 适用于IE6
                   try {
                       xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                   } catch (e) {
                       // 适用于IE5.5,以及IE更早版本
                       try{
                           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                       } catch (e){
                           alert("兄弟,你这是什么浏览器");
                       }
                   }
               }            
               return xmlHttp;
           }

具体实现代码

function changeBox(){
              // 发送的同步请求
              //location.href="/ajax01/AServlet";
              //发送异步请求
              //1.创建XMLHttpRequest对象
              var xmlHttp = createXmlHttpRequest();   //0
              //2.打开与服务器的连接、GET请求: 传递参数: 通过url传递参数
              xmlHttp.open("GET","/day_12Ajax/AServlet?name=lisi");  //1

                //2.1 post提交需要设置请求头
                //xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                // 通过send函数传递参数  key=value&key2=value2....
                //xmlHttp.send("name=wangwu");

              //3.发送请求
              // GET请求: 传递参数1) 通过send函数传递参数
              xmlHttp.send(null);  //2 
              //4.绑定一个监听xmlHttpRequest对象状态改变的事件
              xmlHttp.onreadystatechange = function(){3
              if(xmlHttp.readyState == 4 && xmlHttp.status == 200){  //服务器响应完成, 双层保证4
              //5.获取服务器响应的数据5
          var obj = eval("("+xmlHttp.responseText+")");
              alert(obj.age );
        //将数据放入标签中
        document.getElementById("box").innerHTML=xmlHttp.responseText;
            }
       }
   }
</script>

servlet代码:json格式传输

response.getWriter().print("{\"name\":\"zhangsan\",\"age\":\"21\"}");

 

上一篇:【Socket】Java Socket编程基础及深入讲解


下一篇:AJAX编程