ajax前后端（java）实现

一时失言乱红尘 2022-07-12 05:51 207阅读 0赞

大名鼎鼎的ajax，到底是什么呢

其实ajax=Asynchronous JavaScript and XML(翻译一下就是异步的JavaScript和XML)

先说明下，ajax不是新的编程语言，而是一种整个页面不重新加载的情况下，实现与服务器交换数据，完成网页的局部刷新

ajax怎么用呢，下面听我一一道来

在学习ajax之前，首先我们来学习一个对象，这个对象就是XMLHttpRequest对象。这个对象可以在不向服务器提交整个页面的情况下，实现局部更新网页，当网页全部加载完成后，客户端通过该对象向服务器请求数据，服务器接收数据并处理后，向客户反馈数据。XMLHttpRequest对象提供了对HTTP协议的完全的访问，包括作出post 和head以及普通的get请求的能力，XMLHttpRequest可以同步或者一部返回web服务器的相应，并能以文本或者一个DOM文档的形式返回内容，尽管名为XMLHttpRequest，它不限于和XML文档一起使用，它可以接受任何形式的文本文档，XMLHttpRequest是ajax实现的关键。

几乎目前所有浏览器都支持XMLHttpRequest，这里用了几乎，对，你猜到了总有些浏览器不支持，比如IE5  IE6哈哈哈

但没有关系，毕竟是IE嘛，人家有自己的对象，就是ActiveXObject

好了我们开始我们的ajax使用了

1、创建XMLHttpRequest对象

var xmlhttp;
    if(window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
    }else{
    xml=new ActiveXObject('Microsoft.XMLHTTP');
    }

2.向服务器发出请求

在1中，我们已经创建了一个对象，然而光创建这个对象是远远不够的，我们还要向服务器发出请求，我们将使用到XMLHttpRequest对象的open()和send()方法

xmlhttp.open('GET',url,true);

xmlhttp.send();

方法参数解释：

<table style="margin:10px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:709px; color:rgb(0,0,0); font-family:Verdana,Arial,宋体; font-size:12px; background-color:rgb(249,249,249)"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> open(<span style="margin:0px; padding:0px; border:0px">method</span>,<span style="margin:0px; padding:0px; border:0px">url</span>,<span style="margin:0px; padding:0px; border:0px">async</span>)</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:18px"> 规定请求的类型、URL 以及是否异步处理请求。</p> 
    <ul style="margin:20px; padding:0px; border:0px; list-style-type:none"> 
     <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><span style="margin:0px; padding:0px; border:0px">method</span>：请求的类型；GET 或 POST</li> 
     <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><span style="margin:0px; padding:0px; border:0px">url</span>：文件在服务器上的位置</li> 
     <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><span style="margin:0px; padding:0px; border:0px">async</span>：true（异步）或 false（同步）</li> 
    </ul> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> send(<span style="margin:0px; padding:0px; border:0px">string</span>)</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:18px"> 将请求发送到服务器。</p> 
    <ul style="margin:20px; padding:0px; border:0px; list-style-type:none"> 
     <li style="margin:0px; padding:0px; border:0px; list-style-type:disc"><span style="margin:0px; padding:0px; border:0px">string</span>：仅用于 POST 请求</li> 
    </ul> </td> 
  </tr> 
 </tbody> 
</table>

因为我这里后台用java实现的mvc,所以我的路径写为：

//test是我的项目名称
          var url="../test/getSearch" ;
          //获取search元素的value值
         var searchdata=document.getElementById("search").value;
         var sendStr ="searchdata="+searchdata;
          xmlhttp.open("POST",url, true);
          xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
          xmlhttp.send(sendStr);//多参数xmlhttp.send("searchdata="+searchdata+"&"+"name=zhangsan");

而在web.xml的配置为：

<servlet>
      	<servlet-name>getSearch</servlet-name>
      	<servlet-class>com.gwc.servlet.GetSearch</servlet-class>
      </servlet>
    
      <servlet-mapping>
      	<servlet-name>getSearch</servlet-name>
      	<url-pattern>/getSearch</url-pattern>
      </servlet-mapping>

接着就是后台处理了，让我们来看看后台中的getSearch是如何处理数据的

public class GetSearch extends HttpServlet  {
     
      protected void doGet(HttpServletRequest req, HttpServletResponse resp)
          throws ServletException, IOException {
        System.out.println("get");
        doPost(req, resp);
      }
     
      protected void doPost(HttpServletRequest req, HttpServletResponse resp)
          throws ServletException, IOException {
        PrintWriter out = resp.getWriter();
        //System.out.println("执行到了");
        String searchdata = req.getParameter("searchdata");
        req.setCharacterEncoding("GBK");
        resp.setContentType("text/html;charset=gbk");

//处理完的数据
       String jsonStr = "[{'name':'zhangsan'},{'name':'lisi'}]";

//将处理完的数据发送给前端
        out.println(jsonStr);
      }
    }

好了，前面写了前端只是发出了请求，那么什么时候知道后台已经处理好了并返回数据了呢？也就是说我们需要执行一些基于相应的任务

这就用到了readyState改变，就会触发onreadystatechange事件，readyState属性存有XMLHttpRequest的状态信息

下面是XMLHttpRequest对象的三个重要属性

<table> 
 <tbody> 
  <tr> 
   <td>属性</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>onreadystatechange</td> 
   <td>存储函数，每当readyState属性改变时，就会调用该函数</td> 
  </tr> 
  <tr> 
   <td>readState</td> 
   <td>存有XMLHttpRequest的状态，从0到4发生变化<br> 
    <ul> 
     <li>0：请求未初始化</li> 
     <li>1：服务器连接已经建立</li> 
     <li>2：请求已经接收</li> 
     <li>3：请求处理中</li> 
     <li>4：请求已经完成，且响应已经就绪</li> 
    </ul> </td> 
  </tr> 
  <tr> 
   <td>status</td> 
   <td>200：OK<br> 404：未找到页面</td> 
  </tr> 
 </tbody> 
</table>

在onreadystatechange事件中，我们规定当服务器已做好被处理的准备时候所执行的任务

在readyState等于4且状态为200时，表示响应已就绪

xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState==4&&xmlhttp.status==200){
        var respText = xmlhttp.responseText;
        var array=eval("("+respText+")")
        for(var i=0;i<array.length;i++){
       console.log(array[i]);//name:'zhangsan'    name:'lisi'
              }
        }
        }

如需获得来自服务器的响应，我们可以使用XMLHttpRequest对象的responseText或者responseXML属性，其中前者是获得字符串形式的响应数据，如果后台

返回的是XML形式的响应数据，则用后者。

上述有有一句是这样写的：

var array=eval("("+respText+")")

这句的作用是将其转化为json对象，可能大家会有疑问，为什么直接eval(respText)不行么，为什么要变成eval（“("+respText+")”）呢，这是因为json是以

\{\}的方式来开始以及结束的，在js中，它会被当成一个语句块来处理，加上圆括号的目的是迫使eval函数在处理js代码的时候强制将括号内的表达式转化为对象

而不是作为语句来执行。举个例子，对象字面量\{\}如若不加外层的括号，那么eval会将大括号识别为js代码块的开始和结束标识，那么\{\}将会被认为执行了一句

空语句。

alert(eval("{}"); // return undefined 
    alert(eval("({})");// return object[Object]