1、AJAX= 异步 JavaScript 和 XML。实现不加载新页面的前提下更新页面。
2、工作原理:
浏览器首先触发事件,创建一个XMLHttpRequest对象,发送Http请求,通过网络到达服务器,服务器处理Http请求,然后创建一个回复发送数据到浏览器,通过网络回到浏览器,浏览器利用JavaScript处理返回的数据,更新页面文本。
3、AJAX的基础就是XMLHttpRequest(XHR),XMLHttpRequest用于在后台与服务器进行数据传递,因此无需再次加载新的页面
【1】、创建XMLHttpRequest对象
浏览器会在内部自己创建XMLHttpRequest对象。
variable=new XMLHttpRequest();
【2】、向服务器发送请求
如果需要向服务器发送请求,可以使用open和send方法。
XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:
xmlhttp.open("GET","ajax_info.txt",true);//(方式,url,是否使用异步async参数) xmlhttp.send();
【3】、服务器相应
如果是XML格式的就用responseXML
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
4、以上是AJAX本本身的技术,jquery中有.ajax()方法,可以更简单的使用ajax技术进行前后端数据的异步传输。
其中重要的参数有:
1、url:指前端数据向后端传输的后端接收地址
2、date:指前端向后端传送的数据
3、type:指前端向后端传输的method(post和get)
4、dateType:指后端向前端传返回值的数据类型(text text josn等)
5、success:通常里面是一个函数function(date){},data为返回的数据,在方法体内写如何处理返回值。
实例:
前端:
var url = "/test/check"; $.ajax({ type: "post", url: url, // data: "para="+para, 此处data可以为 a=1&b=2类型的字符串 或 json数据。 data: {"para":1},//json类型 cache: false, async : false, dataType: "json", success: function (data ,textStatus, jqXHR) { if("true"==data.flag){ alert("合法!"); return true; }else{ alert("不合法!错误信息如下:"+data.errorMsg); return false; } }, error:function (XMLHttpRequest, textStatus, errorThrown) { alert("请求失败!"); } });
后端:
/** * 校验 * * @return void */ public void check(){ Map<String,String> result = new HashMap<String,String>();//使用hashmap来接收json对 boolean flag = false; try{ String para= getPara("para");//在servlet中使用reqest.getparameter("para")方法来获取前端参数。
//校验 代码... result.put("flag", "true"); renderJson(result);//返回json数据 }catch(Exception e){ result.put("flag", flag+""); result.put("errorMsg", e.getMessage()); renderJson(result);//返回json数据 e.printStackTrace(); } }
使用servlet的话,后端这样响应:
List<Map<String,Object>> list = bo.selectData(); response.setContentType("application/json;charset=GBK"); PrintWriter out=response.getWriter(); out.write(JSONArray.fromObject(list).toString());//使用alibaba的fastjson的话用JSON.tojson()方法 out.flush(); out.close();