ajax前后端（java）实现

大名鼎鼎的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();

方法参数解释：

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

• string：仅用于 POST 请求

因为我这里后台用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对象的三个重要属性

属性描述onreadystatechange存储函数，每当readyState属性改变时，就会调用该函数readState存有XMLHttpRequest的状态，从0到4发生变化

• 0：请求未初始化
• 1：服务器连接已经建立
• 2：请求已经接收
• 3：请求处理中
• 4：请求已经完成，且响应已经就绪

status200：OK
404：未找到页面
在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]