首页 > 代码库 > Ajax学习笔记(一)
Ajax学习笔记(一)
XMLHttpRequest对象详解
1、Ajax应用中我们使用XMLHttpRequest对象异步发送请求,这种请求既可以是GET,也可以是POST,都可以带请求参数。
请求发送出去之后,服务器响应会在合适的时候返回,但是客户端不会自动加载这种异步响应,程序必须先调用XMLHttpRequest对象的responseText或responseXML来获取 服务器响应,再通过DOM操作将服务器响应动态加载到当前页面中。
XMLHttpRequest的用处是:提供与服务器异步通信的能力
2、XMLHttpRequest对象的基本方法:
abort() :停止发送当前请求
getAllResponseHeaders():获取服务器返回的全部响应头
getResponseHeaders("headerLabel"):根据响应头的名称,获取对应的响应头
request.open(method, url, async, username, password)建立与服务器的URL链接
send(content):发送请求,Content是请求的参数
setRequestHeader("label","value")在发送请求前设置请求头
3、XMLHttpRequest的基本属性:
onreadystatechange:指定XMLHttpRequest对象状态改变时的事件处理函数
readyState:XMLHttpRequest对象的处理状态
responseText:获取服务器的响应文本
responseXML:获取服务器响应的XML文档对象
status:服务器返回的状态码,只有服务器的响应已经完成才会有该状态码
statusText:服务器返回状态的文本信息
例程:
1、Ajax应用中我们使用XMLHttpRequest对象异步发送请求,这种请求既可以是GET,也可以是POST,都可以带请求参数。
请求发送出去之后,服务器响应会在合适的时候返回,但是客户端不会自动加载这种异步响应,程序必须先调用XMLHttpRequest对象的responseText或responseXML来获取 服务器响应,再通过DOM操作将服务器响应动态加载到当前页面中。
XMLHttpRequest的用处是:提供与服务器异步通信的能力
2、XMLHttpRequest对象的基本方法:
abort() :停止发送当前请求
getAllResponseHeaders():获取服务器返回的全部响应头
getResponseHeaders("headerLabel"):根据响应头的名称,获取对应的响应头
request.open(method, url, async, username, password)建立与服务器的URL链接
send(content):发送请求,Content是请求的参数
setRequestHeader("label","value")在发送请求前设置请求头
3、XMLHttpRequest的基本属性:
onreadystatechange:指定XMLHttpRequest对象状态改变时的事件处理函数
readyState:XMLHttpRequest对象的处理状态
responseText:获取服务器的响应文本
responseXML:获取服务器响应的XML文档对象
status:服务器返回的状态码,只有服务器的响应已经完成才会有该状态码
statusText:服务器返回状态的文本信息
例程:
<body> <select name="first" id="first" size="3" onchange="change(this.value);"> <option value=http://www.mamicode.com/"1" selected="selected">>4、XMLHttpRequest遵循的步骤:
1.初始化XMLHttpRequest对象
2.打开与服务器的连接
3.设置监听XMLHttpRequest状态改变的事件函数
4.发送请求
5、通常而言,GET请求用于从服务器上获取数据,POST请求用于向服务器发送数据
GET请求将所有的请求参数转换成一个查询字符串,并将该字符串添加到请求的URL之后
如果某个表单的action属性设为GET,则请求会将表单中各字段的值转换成字符串,并附加到URL之后
POST请求则通过HTTP POST机制,将请求的参数以及对应的值放在HTML Header中传输,用户看不到明码的请求参数值
GET请求传输的数据量较小,一般不能大于2KB,POST请求参数的大小不受限制,但往往取决于服务器的限制
当使用Ajax发送异步请求时,建议使用POST请求。
6、中文乱码问题
正常使用POST提交(POST请求默认使用UTF-8字符集来编码请求参数)并且在jsp页面添加(有时也可以不加,因为有的服务器页面默认编码即为UTF-8)setCharacterEncoding
("UTF-8");应该没有乱码。
如果使用GET提交,GET请求将请求参数和对应的值附加在请求的URL之后,对于中文的请求参数值将不再以中文方式传递,而是转码成URL的格式,因此必须在服务器端这样处理:假设服务器端获得的参数是target,先获取value请求参数,再按ISO-8859-1字符集编码成字节数组,然后按UTF-8字符集将该字节数组解码成字符串。
String target=request.getParameter("value");
String a=new String(target.getBytes("ISO-8859-1"),"UTF-8");//上面的对GET方式的处理并不能保证高枕无忧,因为不同的浏览器可能采用不同的字符集编码GET请求参数,所以尽量用POST提交
7、发送XML请求
html代码: <body> <select name="first" id="first" style="width: 80px;" size="3" multiple="multiple"> <option value=http://www.mamicode.com/"1" >中国>从上面的代码可以看出,发送的XML请求依然是POST请求,只是请求参数不再以param=value的形式发送,而是直接采用XML字符串作为参数。
这意味着服务器端不能直接获取请求参数,而是必须以流的形式获取请求参数。
8、使用XML响应客户端请求要注意不同浏览器之间的差异,虽然各个浏览器都实现了DOM规范,但它们在细节上依然存在一些差异。返回的XML文档对象需要浏览器的XML解析器的支持。
9、XMLHttpRequest对象的运行周期
(1)Ajax应用总是从创建XMLHttpRequest对象开始,XMLHttpRequest的作用正如它的名字所暗示的,允许通过客户端脚本来发送Http请求,Ajax应用的第一步总是创建一个XMLHttpRequest实例,然后用它来发送请求,GET/POST。
(2)XMLHttpRequest发送完之后,服务器的响应何时到达?应该何时处理服务器的响应呢?这需要借助js的事件机制。XMLHttpRequest也是一个普通的js对象,就如一个普通的按钮或文本框一样,可以触发事件:XMLHttpRequest触发的事件就是onreadystatechange.XMLHttpRequest对象的状态改变时,将触发onreadystatechange事件。为XMLHttpRequest对象的onreadystatechange属性指定事件处理函数,该事件处理函数可以在XMLHttpRequest状态改变时被触发,这个事件处理函数也称回调函数。
(3)XMLHttpRequest状态改变,且readyState为4时,即表明服务器的响应已经完成,此时可以处理服务器响应。
(4)通过js的事件机制,使用事件处理函数监听XMLHttpRequest状态的改变,当XMLHttpRequest的readyState为4,且status为200时,事件处理函数 处理服务器响应。
(5)进入事件处理函数后,XMLHttpRequest对象任然不可或缺,事件处理函数需要借助XMLHttpRequest对象来获取服务器的响应,调用responseText方法或者responseXML方法获取服务器的响应。至此,XMLHttpRequest对象的运行周期结束。
(6)JavaScript通过DOM操作将服务器响应动态加载到HTML页面中。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。