大名鼎鼎的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 以及是否异步处理请求。
|
send(string) | 将请求发送到服务器。
|
因为我这里后台用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发生变化
|
status | 200: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]