Ajax入门

最新推荐文章于 2024-10-18 19:02:29 发布

张晓鉴Oliver

最新推荐文章于 2024-10-18 19:02:29 发布

阅读量152

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/qq_36783248/article/details/79097548

版权

坚持每天写博文，记录开发中的点点滴滴

使用XMLHttpRequest对象绕开服务器发送一个请求
举个例子：点击一个按钮跳转到一个servlet

<input type="button" value="Ajax请求" onclick="Ajaxrequest()">

function Ajaxrequest(){
        //创建ajax请求对象
        var ajax = new XMLHttpRequest();
        //创建http请求  参数1：GET/POST 不缺分大小写；
        //参数2：请求的URL可以绝对可以相对
        //参数3：请求是否为异步：true(异步)；默认是true ajax使用异步
        ajax.open("GET","<%=request.getContextPath()%>/AjaxServlet",true);
        //发送http请求
        ajax.send();
    }

<servlet-mapping>
     <servlet-name>AjaxServlet</servlet-name>  <!-- servlet名字，必须和上述一致 -->
     <url-pattern>/AjaxServlet</url-pattern><!--以/开头，提供外界用户访问的路径 -->
  </servlet-mapping>

这样点击【Ajax请求】按钮跳转到了servlet并且页面没有刷新

现在是给服务器发送请求了，但是怎么获取服务器响应的数据呢
比如现在在servlet中获取一下服务器时间：

Date date = new Date();
System.out.println(date);

此时不能用使用request.setAttribute();因为JS中写的是客户端代码，而servlet是服务器端的代码，不能用；JSP是运行在服务器端的页面可以取到数据，但是当我们使用Html页面的时候又要怎么取得数据呢？

直接发出文本来让客户端接受，因为html本质上是存储文本的文件，服务器打印出响应格式的文本客户端就可以接收到。

PrintWriter writer = response.getWriter();
writer.println(date);//浏览器接受的是一个字符串

接受响应的数据：
接受的响应信息会放在XMLHttpRequest对象里的一个属性中：

ajax.responseText

但是因为ajax是异步的，后台处理数据需要一些时间，在页面上的直接获取ajax.responseText
的时候后台正在处理数据无法得到
我们可以在下面代码中设置为同步

//参数3：请求是否为异步：true(异步)；默认是true ajax使用异步
        ajax.open("GET","<%=request.getContextPath()%>/AjaxServlet",false);

如果使用同步请求，JS方法会等到响应完毕后才执行
如果使用异步请求，JS方法会立刻执行

合理的解决方法：监听事件

ajax.open("GET","<%=request.getContextPath()%>/AjaxServlet",true);
        //请求状态的改变事件
        ajax.onreadystatechange=function(){
            if(ajax.readyState == 4){
                //后台文本数据
                var text = ajax.responseText;
                document.getElementById("text").innerHTML=text;
            }
        };
        //发送http请求
        ajax.send();

<dir id="text"></dir>

ajax.readyState的五种状态
(0)未初始化
此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在，否则浏览器会报错－－对象不存在。
(1)载入
此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
(2)载入完成
此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
(3)交互
此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。
(4)完成
此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。

这样就可以获得服务器的响应信息了。

浏览器的普通交互方式

浏览器的普通交互方式