Ajax&Java
2016-01-23 22:01
302 查看
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)
是一种基于浏览器的XMLHttpRequest对象实现的创建交互式网页应用的网页开发技术。
用JS创建XMLHttpRequest对象并调用其方法实现基本的Ajax请求:
这发送的是一个GET请求,如果要发送POST请求要记得设置请求投(GET请求数据可以通过url附加,POST请求可以发送时附加)
注意:回调函数务必在发送请求前设置
回调函数的内容:
其中xmlhttp.readyState表示请求执行的状态(4表示请求完成),而xmlhttp.status表示http的响应返回状态码。
下面写一个小例子实现Ajax向后端请求数据:
服务端代码(Java实现)
客户端代码:
这里写了两个通用的函数loadGetHttp和loadPostHttp来实现请求的加载,这样在使用时只要传人对应的URL和回调函数即可。
这里只是简单的举例子,实际使用中会将数据打包成XML或JSON格式,也有很多方便的实现Ajax的类库(如Jquery、EXT.JS......)
是一种基于浏览器的XMLHttpRequest对象实现的创建交互式网页应用的网页开发技术。
用JS创建XMLHttpRequest对象并调用其方法实现基本的Ajax请求:
xmlhttp = new XMLHttpRequest(); //创建XMLHttpRequest对象 xmlhttp.onreadystatechange = f; //设置请求完成后的回调函数 xmlhttp.open("GET", url, true); //打开指定的url xmlhttp.send(); //发送请求
这发送的是一个GET请求,如果要发送POST请求要记得设置请求投(GET请求数据可以通过url附加,POST请求可以发送时附加)
xmlhttp = new XMLHttpRequest(); //创建XMLHttpRequest对象 xmlhttp.onreadystatechange = f; //设置请求完成后的回调函数 xmlhttp.open("POST", url, true); //打开指定的url xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded") //设置请求头 xmlhttp.send(data); //发送请求,并附加数据
注意:回调函数务必在发送请求前设置
回调函数的内容:
if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { var data = xmlhttp.responseText; var test = document.getElementById("test"); test.innerHTML += data + "<br>"; } }
其中xmlhttp.readyState表示请求执行的状态(4表示请求完成),而xmlhttp.status表示http的响应返回状态码。
下面写一个小例子实现Ajax向后端请求数据:
服务端代码(Java实现)
@WebServlet(name = "AddServlet", urlPatterns = "/AddServlet") public class AddServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.getWriter().write("helloworld"); } }
客户端代码:
<html> <head> <script> var xmlhttp; function loadGetHttp(url, f) { xmlhttp = new XMLHttpRequest(); //创建XMLHttpRequest对象 xmlhttp.onreadystatechange = f; //设置请求完成后的回调函数 xmlhttp.open("GET", url, true); //打开指定的url xmlhttp.send(); //发送请求 } function loadPostHttp(url, data, f) { xmlhttp = new XMLHttpRequest(); //创建XMLHttpRequest对象 xmlhttp.onreadystatechange = f; //设置请求完成后的回调函数 xmlhttp.open("POST", url, true); //打开指定的url xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded") //设置请求头 xmlhttp.send(data); //发送请求,并附加数据 } function cfunc() { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { var data = xmlhttp.responseText; var test = document.getElementById("test"); test.innerHTML += data + "<br>"; } } } window.onload = function () { var button = document.getElementById("button"); button.onclick = function () { loadGetHttp("AddServlet", cfunc); } } </script> </head> <body> <input type="button" id="button" value="test"/> <div id="test"></div> </body> </html>
这里写了两个通用的函数loadGetHttp和loadPostHttp来实现请求的加载,这样在使用时只要传人对应的URL和回调函数即可。
这里只是简单的举例子,实际使用中会将数据打包成XML或JSON格式,也有很多方便的实现Ajax的类库(如Jquery、EXT.JS......)
相关文章推荐
- eclipse 不太常用的快捷键
- spring+Struts+hibernate学习
- java8对接口的改变
- 基于eclipse maven 开发 spark 集群计算
- Java中的类反射与泛型信息
- eclipse 常用快捷键最佳实践
- Java学习之国际化程序
- 阿里大鱼短信平台使用(Java)
- spring+dwr
- 出来驾到学java3
- Java 格式化输出
- Java 取得当前日期之后N天的日期 zz
- spring oxm入门(包含demo)
- JavaSE入门学习8:Java基础语法(四)
- java执行bat批处理文件(下)
- MyEclipse 2015创建Maven Web项目的正确姿势
- Spring MVC 生成EXCEL
- 简易的Java拼图游戏
- spring mvc和web-flow的整合方案
- Mac 终端命令运行java