首页 > 编程语言> 文章详细

AJAX--javascript

2020-05-22 20:08:30 阅读：272 来源： 互联网

标签：xmlHttp 请求 javascript send AJAX 服务器 XMLHttpRequest

什么是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\"}");

标签：xmlHttp,请求,javascript,send,AJAX,服务器,XMLHttpRequest
来源： https://www.cnblogs.com/64Byte/p/12939414.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

AJAX--javascript

什么是AJAX

同步交互与异步交互

AJAX的优缺点

AJAX核心（XMLHttpRequest）