Ajax基础总结

原创于 2019-01-01 23:29:16 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

问题

目前来，所有的请求的发送都是通过浏览器自己直接进行发送，响应是浏览器在接收到响应信息后自主的将响应数据覆盖当前页面显示。现在，要求留原有页面内容的情况下显示新的响应内容。

解决办法

使用ajax技术

ajax原理

请求由ajax引擎对象发送，响应数据，浏览器不会直接进行处理，而是流转给发请求的ajax引擎对象。这样我们可以通过操作ajax引擎对象变相的实现在页面中显示新的响应资源。

本质

js的DOM操作中的数据由程序员自己写死声明，变成从服务器动态的获取。

使用

1 创建ajax引擎对象

var ajax;
if(window.XMLHttpRequest){

ajax=new XMLHttpRequest//火狐谷歌
}else if(window.ActiveXObject){
ajax=new ActiveXObject("Msxml2.XMLHTTP");//ie
}

2 声明ajax监听函数

ajax.onreadystatechange=function(){
//判断数据状态码
if(ajax.readyState==4){//4 表示响应数据成功接收
//判断响应状态码
if(ajax.status==200){
//获取响应数据
//普通文本
//json格式数据
var data=ajax.responseText;
//xml数据
//var doc=ajax.responseXML;
var data=ajax.responseText;
//处理响应数据(js的DOM操作)
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML=data;
}else if(ajax.status==404){
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML="请求资源未找到";
}else if(ajax.status==500){
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML="服务器繁忙";
}
}

}

3 创建并发送请求

ajax.open(method,url,async)
ajax.send("请求数据")
解释:
method：表示请求的方式，值为get/post
url:表示请求地址，一般为要请求的servlet的别名。
async:表示异步还是同步请求，true表示异步，false表示同步，默认为异步。
注意：
如果请求方式是get方式，则请求数据需要拼接在url的后面，以？隔开，键值对。并且send中要写null
如果是post请求方式，则在send方法中书写请求数据即可。并且要声明数据的提交格式为键值对。

示例：
//使用get方式
ajax.open("get","user?uname="+uname,true);
ajax.send(null);
//post方式
ajax.open("post","user", true);
//设置请求数据的格式

ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("un="+uname);

4 ajax的响应数据格式

普通文本

后台在接收到ajax请求后，处理后直接响应普通字符串给ajax

josn数据：

后台在接收到ajax请求后，处理后响应json格式的字符串给

ajax

ajax处理代码中使用eval()方法将json数据转换为js对的对象，将对象中的数据通过js的dom操作显示到页面中。
注意：
json格式：
var 对象名={
键名:值,
键名:值,
........
}

xml数据

后台在接收到ajax请求后，处理后响应xml格式的字符串给ajax。
前台使用ajax.responseXML进行数据接收，返回的是xml文档对象(document)。使用document对象将xml中取出并显示到页面中即可
注意：后台的响应数据格式必须设置成xml格式： resp.setContentType("text/xml;charset=utf-8");

注意：ajax是前端的技术，由浏览器进行解析执行。