ajax 大洋与小样的第二步
一、Ajax的对象 XMLHttpRequest的方法
| 方法 | 描述 |
|---|---|
| abort() | 停止当前请求 |
| getAllResponseHeaders() | 把 HTTP请求的所有响应首部作为健／值对返回 |
| getResponseHdader(“header”) | 返回指定首部的串值 |
| open(“method”,”url”) | 建立对服务器端调用。Method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL |
| send(conten) | 向服务器发送请求 |
| setRequestHeader(“header”,”value”) | 把制定首部设置为所提供的值。在设置任何首部之前必须先调用open() |
二、发送请求
setRequestHeader(header,value)
- 当浏览器向服务器请求页面时，它会伴随着这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据（metadata）.首部信息用来声明一个请求是GET还是 POST。
- Ajax请求中，发送首部信息的工作可以由setRequestHeader完成
- 参数header :首部的名字；参数 value：首部的值
- 如果用POST请求向服务器发送数据，需要将”Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据，并且数据已经符合URL编码来。
- 该方法必须在open()之后才能调用
三、接收响应
readyState
readyState属性表示Ajax请求的当前状态。它的值用数字代表。
- 0 代表未初始化，还没有调用open 方法
- 1 代表正在加载，open方法已经被调用，但 send方法还没有被调用
- 2 代表加载完毕。send方法已被调用，请求已经开始
- 3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
每次readyState值的改变，都会触发readystatechange事件。如果把onreadystatechange事件处理函数赋给一个函数，那么每次 readyState的值的改变都会引发该函数的执行。
readyState值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把readyState的值统一设为4.实例代码呈现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
// 1、获取a节点，并为其添加onclick响应函数
document.getElementsByTagName("a")[0].onclick=function(){
// 3、创建一个XMLHttpRequest对象
var request=null;
request= new XMLHttpRequest();
// 4、准备发送请求对数据：url
// 增加时间戳起到禁用缓存对目的
var url= this.href+"?time="+new Date();
// var method="GET";
var method="POST";
// 5、调用XMLHttpRequest 对象对open方法
request.open(method,url);
request.setRequestHeader("ContentType","application/x-www-form-urlencoded");
// 6、调用XMLHttpRequest对send方法
request.send("name='atguigu'");
// 7、为XMLHttpRequest 对象添加onreadystatechange响应函数
request.onreadystatechange=function(){
if(request.readyState==4){
if(request.status==200||request.status==304){
alert(request.responseText);
}
}
}
// 8、判断响应是否完成： XMLHttpRequest对象对readyState 属性值为4对时候
// 9、再判断响应是否可用：XMLHttpRequest对象对status属性值为200
// 10、打印响应结果：responseText
// 2、取消a节点对默认行为
return false;
}
}
</script>
</head>
<body>
<a href="helloAjax.txt" >Ajax</a>
</body>
</html>ajax 大洋与小样的第二步的更多相关文章
- ajax大洋第一步
Ajax工具包 Ajax并不是一项新技术,它实际上是几种技术,每种技术各尽其职,以一种全新的方式聚合在一起. 服务器端语言:服务器需要具备向浏览器发送特定信息的能力.Ajax与服务器端语言无关. XM ...
- ajax是什么
1.ajax是什么? ajax: asynchronous javascript and xml: 异步的javascript和xml. ajax是一种用来改善用户体验的技术,其本质是利用浏览器内置的 ...
- ajax 动态载入html后不能执行其中的js解决方法
事件背景 有一个公用页面需要在多个页面调用,其中涉及到部分js已经写在了公用页面中,通过ajax加载该页面后无法执行其中的js. 解决思路 1. 采用附加一个iframe的方法去执行js,为我等代码洁 ...
- ajax+jquery+JSON笔记
ajax (asynchronous javascript and xml -- 基于javascript和xml的异同步通讯技术) 特征: 异步通讯 异步的请求-响应模式 1.传统的 ...
- 21SpringMvc_异步发送表单数据到Bean，并响应JSON文本返回(这篇可能是最重要的一篇了)
这篇文章实现三个功能:1.在jsp页面点击一个按钮,然后跳转到Action,在Action中把Emp(int id ,String salary,Data data)这个实体变成JSON格式返回到页面 ...
- 项目代码摘抄，dot的用法之1
function searchTags() { var list = $('#tags-list-select option:selected').val(); console.log(list); ...
- JAVAEE——BOS物流项目12：角色、用户管理，使用ehcache缓存，系统菜单根据登录人展示
1 学习计划 1.角色管理 n 添加角色功能 n 角色分页查询 2.用户管理 n 添加用户功能 n 用户分页查询 3.修改Realm中授权方法(查询数据库) 4.使用ehcache缓存权限数据 n 添 ...
- BOS物流项目第十二天
教学计划 1.角色管理 a. 添加角色功能 b. 角色分页查询 2.用户管理 a. 添加用户功能 b. 用户分页查询 3.修改Realm中授权方法(查询数据库) 4.使用ehcache缓存权限 ...
- JQuery ajax请求struts action实现异步刷新的小实例
这个样例是用JQuery ajax和struts来做的一个小样例,在这个样例中采用两种方式将java Util中的list转换成支json的格式,第一种是用json-lib.jar这个jar包来转换, ...
随机推荐
- 做一款直播类app
ijkplayer 是一款做视频直播的框架, 基于ffmpeg, 支持 Android 和 iOS, 网上也有很多集成说明, 但是个人觉得还是不够详细, 在这里详细的讲一下在 iOS 中如何集成ijk ...
- 编程思想之——"人是活的，程序是死的"
"人是活的,程序是死的"这句话我时常提起,可能很多人不是很理解我为什么会这样说,下面我就简单来谈谈我对这句话的理解. 1.不要因为技术而技术,技术选型的初衷是需求. 现在很多人在做 ...
- 【转载】JavaScript继承详解一
面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++.C#.Java)的开发经验. 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例. 类定义了一类事物公共的行为和方法:而实例则 ...
- Spring IOC以及三种注入方式
IOC是spring的最基础部分,也是核心模块,Spring的其他组件模块和应用开发都是以它为基础的.IOC把spring的面向接口编程和松耦合的思想体现的淋漓尽致. IOC概念 IOC(Invers ...
- Android中使用findViewByMe提升组件查找效率
1.引出 安卓初学者一般在写android Activity的时候总是会在onCreate方法中加上setContentView方法来加载layout,通过findViewById来实现控件的绑定,刚 ...
- 如何理解jQuery中的ajaxSubmit方法
版权声明:本文为博主原创文章,转载请标注:www.cnblogs.com/gdsblog 刚刚学习中,使用到了ajaxSubmit,犹豫以前没有接触㢧这个,所以刚开始是一脸懵逼状态,最后通过查找资料的 ...
- Ionic2开发笔记（2）创建子页面及其应用
1. 当你第一次产生ionic2应用程序,这是生成的项目结构 ├── ├── config.xml 这包含配置应用程序的名称,和包名,将被用于我们的应用程序安装到一个实际的设备. ├── h ...
- KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架之koahub-body-res
koahub body res Format koa's respond json. Installation $ npm install koahub-body-res Use with koa v ...
- 1644: [Usaco2007 Oct]Obstacle Course 障碍训练课
1644: [Usaco2007 Oct]Obstacle Course 障碍训练课 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 383 Solved ...
- kali linux 忘记root密码重置办法
有段时间没用kali linux 的,加上最近装的系统有比较多,系统root的密码忘掉了,真是麻烦啊.之前在网上看到的一些方法尝试后没进的去,可能是因为不同的linux 不一样吧. 如果因为忘记密码而 ...