在我的理解中,Ajax 就是在不刷新整个页面的情况下,将从服务器端的数据(从数据库,从xml文件,或者是自己Hard
Code在程序中的字符串等)拿到前端,在html页面上展现出来的一种技术。
那么在整个通讯过程中,会涉及到几点:
1. JS
在js中如何去写代码并提交一个请求呢?一般来说,html页面如果有需要提交的数据都会定义一个form,然后
submit这个form, form所对应的action 就是需要采取action的某个页面可以是jsp,可以是asp,当然也可以是servlet. 但
是form并不是唯一的方法。
XMLHttpReqeust 对象是用来在后台与服务器交换数据的,所有的现代浏览器(IE7+、Firefox、Chrome、Safari
以及 Opera)都内建了这个对象。
var xmlHttpRequest = new XMLHttpRequest();
在 JS 中,可以用以下代码来发送一个请求(Post 或者 Get )
function sendAjaxRequest(url,callback){
url = "index.do";
xmlHttpRequest.onreadystatechange = callback;
xmlHttpRequest.open("POST", url, true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
xmlHttpRequest.send("param=test");
}
或者
function sendAjaxRequest(url,callback){
url = "index.do";
xmlHttpRequest.onreadystatechange = callback;
xmlHttpRequest.open("GET", url + "?param=test", true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
xmlHttpRequest.send(null);
}
url = "index.do" 在这里,是后台处理请求的一个servlet。
open 在这里只是初始化一些参数,比如Method(POST or GET),比如上面提到的url, 最后一个参数是async 参数, 表明是否要异步执行,设为true或者省略都是默认异步处理,这种情况下,通常要指定onreadystatechange的回调函数。
send 就是发送一个http请求了,如果是post,那么必须将想要传送的参数或者其它内容放在这里,而如果是Get请
求的话,这里一般就是忽略了的,可以直接设置为null。
而 callback就是一个回调函数,当XMLHttpRequest对象的state变化的时候,都会调用这个函数,并根据其实现
的逻辑去处理。
回调函数
function callback() {
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
var rt = xmlHttpRequest.responseText;
// do something with rt
}
}
至于XMLHttpRequest.readyState 和 status 有多少种,可自行google,一般来说,只有当readyState == 4
并且status == 200 的时候才说明整个请求都处理好了,可以去处理返回来的数据(xmlHttpRequest.responseText)。
2. Servlet
我比较笨,所以一直想知道整个过程是怎么处理的,比如xmlHttpRequest.responseText是在哪里写进去的,我
知道是在Servlet写的,但是我又想知道是怎么写进去的,写进去之后又是怎么传回到前台的。
当js发送了一个请求到一个servlet,如index.do(其实这些.do都是自己定义的,在每个web容器都可以自己定义并
进行拦截和解析),那么index.do所对应的servlet就会被触发,每一个请求都会被包装成含有HttpServletRequest 和
HttpServletResponse的对象,那么Request中就包含了你的参数,如上面在js所传的param参数了,而response则
可以写入你打算传回到前端的数据了
获取Param参数
String param = URLDecoder.decode(request.getParameter("param"),"UTF-8");
在中间可以做很多你想做的事情,然后再想想什么是你想传回前台的。
设置response的返回值,就是上面xmlHttpRequest中的responseText
response.setContentType("text/html;charset=utf-8");
response.setCharacterEncoding("UTF-8");
String responseText = “返回的值”;
response.getWriter().write(responseText);
其实整个过程大概就是这样,至于在前端跟后台服务器传送的responseText就可以是多种形式了,可以是纯文本,可以是xml,可以是JSON格式的,各种各样,就看自己想怎么用了
分享到:
相关推荐
在源网页加载之前,实现一个XMLHttpRequest的代理对象,然后覆盖全局的XMLHttpRequest,这样一但上层调用 new XMLHttpRequest这样的代码时,其实创建的是Ajax-hook的代理对象实例
14_利用XMLHttpRequest接受与处理XML数据.doc XMLHttpRequest 接受 处理 XML数据
JS中基于XMLHttpRequest的Get 请求demo,包含2请求方式的源代码,可直接用于项目开发。
XMLHttpRequest方法和属性API,介绍了XMLHttpRequest的方法和属性
XMLhttpRequest实现拖动上传
对XMLHTTPRequest的调用方法、属性等做详细介绍。
xmlhttprequest.js
XmlHttpRequest详解XmlHttpRequest详解XmlHttpRequest详解
Ajax深度剖析,XMLHttpRequest对象大揭秘
在使用XMLHttpRequest对象发送请求和处理响应之前,必须先用JavaScript创建一个XMLHttpRequest对象。由于XMLHttpRequest不是一个W3C标准,所以可以采用多种方法使用JavaScript来创建XMLHttpRequest的实例。Internet ...
php+js使用XMLHttpRequest通过js模拟表单提交上传视频同时实现进度条展示,上传后自动加载并播放功能。
NULL 博文链接:https://justsee.iteye.com/blog/690353
介绍了XMLHttpRequest对象的基本知识
AJAX(XMLHttpRequest)进行跨域请求方法详解
需要重点说明的是,XMLHttpRequest并不是一个W3C标准,不过许多功能已经涵盖在一个新提案中:DOM Level 3加载和保存规约(DOM Level 3 Lo Asp.net Ajax UpdatePanel.Triggers 属性 属性值 类型:System.Web.UI..::...
全面剖析Ajax XMLHttpRequest对象
文件包括了:项目工程(关键部分注解详细),以及sql文件。功能:选中第一个下拉框,局部刷新第二个下拉框的值,且...主要使用了MySQL,jdbc,servlet,jsp,而异步是使用了原生的JS和XMLHttpRequest异步对象实现的。
使用XMLHTTPRequest实现自定义ajax。javascript闭包模式写法。值的学习
XMLHTTPREQUEST对象创建,交互,回调底层代码。。。
详解Ajax的核心对象XmlHttpRequest