js调用ajax以及JSON.parse()与JSON.stringify()的使用
2017-09-05 21:39
986 查看
GET请求
POST请求
注意乱码问题
获取XML文件数据:
通过调用responseXML获取对象,然后再获取xml文件中的配置信息
当然,如何读取xml文件需要在请求访问的url中进行处理:
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();
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();
相关文章推荐
- Ajax 控件 的使用 以及js调用后台方法【自己总结一下】
- js中eval()和$.parse()的区别以及JSON.stringify()
- js数组使用JSON.stringify()和toString()的区别,JSON.parse
- 【菜鸟学WCF】使用js+ajax调用WCF以及返回数据类型的控制
- JS/JavaScript中解析JSON --- JSON.parse()、JSON.stringify()以及$.parseJSON()使用详解
- js中eval()和$.parseJSON()的区别和联系以及JSON.stringify()
- Js中JSON.stringify()与JSON.parse()与eval()详解及使用案例
- JST+JSON+AJAX——使用客户端js模版代替服务端数据绑定
- JST+JSON+AJAX——使用客户端js模版代替服务端数据绑定
- JST+JSON+AJAX——使用客户端js模版代替服务端数据绑定
- 通过ajax调用php生成json转给js,生成html
- android学习笔记---53_采用网页设计软件界面,以及使用android系统内置的浏览器,利用js调用java方法
- 使用ajax后后台调用js函数
- android学习笔记---53_采用网页设计软件界面,以及使用android系统内置的浏览器,利用js调用java方法
- [WebMethod]的使用,ajax调用[WebMethod]的使用,webservice(web服务) asmx的使用,ajax调用[WebMethod]进行json传输
- struts2如何动态调用action的方法以及使用json插件范围json格式的javascript对象
- Javascript笔记一 js以及json基础使用说明
- jquery中ajax调用json数据的使用说明
- ajaxToolkit:AutoCompleteExtender 的触发选择事件以及JSON序列化和使用键值对
- IE6,7下的JSON.stringify(),JSON.parse()使用-20 chapter(扩展阅读)