您的位置:首页 > Web前端 > JavaScript

js调用ajax以及JSON.parse()与JSON.stringify()的使用

2017-09-05 21:39 986 查看
GET请求

window.onload = function(){
document.getElementsByName("username")[0].onblur = function(){
//1、获取xmlHttpRequest对象
var xmlHttpRequest = new XMLHttpRequest();
//2、打开连接
//xmlHttpRequest.open(method, url, async, username, password)
//method:异步请求的是GET还是POST方法
//url:请求访问哪个url
//async:是否为异步请求,默认为true
//username和password先不要管
var method = "GET";
var url = "${pageContext.request.contextPath}/checkServlet?username="+this.value;
xmlHttpRequest.open(method, url);
//3、发送
//send(body)里面的body主要针对method为post的情况
xmlHttpRequest.send(null);
//4、设置回调函数
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
//xmlHttpRequest.responseXML;
//回调结果有两种,一种是text(普通文本,html或者是json),一种是xml
var result = xmlHttpRequest.responseText;
}
};
};
};


POST请求

//1、获取xmlHttpRequest对象
var xmlHttpRequest = new XMLHttpRequest();
//2、打开连接
var method = "POST";
var url = "${pageContext.request.contextPath}/checkServlet";
xmlHttpRequest.open(method, url);
//3、发送,这里特别一点,因为需要设置请求头才能获得数据
xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttpRequest.send("username="+this.value);
//4、设置回调函数
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
//xmlHttpRequest.responseXML;
//回调结果有两种,一种是text(普通文本,html或者是json),一种是xml
var result = xmlHttpRequest.responseText;
}
};


注意乱码问题

获取XML文件数据:

通过调用responseXML获取对象,然后再获取xml文件中的配置信息

//1、获取xmlHttpRequest对象
var xmlHttpRequest = new XMLHttpRequest();
//2、打开连接
var method = "POST";
var url = "${pageContext.request.contextPath}/checkServlet";
xmlHttpRequest.open(method, url);
//3、发送,这里特别一点,因为需要设置请求头才能获得数据
xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttpRequest.send("username="+this.value);
//4、设置回调函数
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
var doc = xmlHttpRequest.responseXML;
var name = doc.getElementsByTagName("username")[0].firstChild.nodeValue;
}
};


当然,如何读取xml文件需要在请求访问的url中进行处理:

response.setContentType("text/html;charset=utf-8");
InputStream in = request.getServletContext().getResourceAsStream("/message.xml");
BufferedReader bufr = new BufferedReader(new InputStreamReader(in));
PrintWriter writer = response.getWriter();
String line = null;
while((line = bufr.readLine())!=null){
writer.println(line);
}
bufr.close();

POS
4000
T请求返回json对象

window.onload = function(){
document.getElementsByName("username")[0].onblur = function () {
//1、获取xmlHttpRequest对象
var xmlHttpRequest = new XMLHttpRequest();
//2、打开连接
var method = "POST";
var url = "${pageContext.request.contextPath}/checkServlet";
xmlHttpRequest.open(method, url);
//3、发送,这里特别一点,因为需要设置请求头才能获得数据
xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttpRequest.send("username="+this.value);
//4、设置回调函数
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
var doc = xmlHttpRequest.responseText;
var objs = JSON.parse(doc);
//转换成json对象时,得到多个对象,这时需要遍历
for(obj in objs){
for(key in obj){
//获取key
console.log(key);
//获取value
console.log(obj[key]);
}
}
//json对象转换成字符串
var json = JSON.stringify(objs);
console.log(json);
}
};
};

对应的在checkServlet中需要返回符合json格式的字符串

//获取post中body的参数
String parameter = request.getParameter("username");
System.out.println(parameter);
User user = new User("andy",123);
//使用gson获取符合json格式的字符串
Gson gson = new Gson();
String json = gson.toJson(user);
PrintWriter writer = response.getWriter();
writer.print(json);
writer.close();
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐