ajax起步 （二）
Ajax的关键在于XMLHttpRequest对象，如下基本用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<button>Apples</button>
<button>Cherries</button>
<button>Bananas</button>
</div>
<div id="target">
press a button
</div>
<script type="text/javascript">
var buttons=document.getElementsByTagName("button")
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=handleButtonPress;
}
function handleButtonPress(e){
var httpRequest=new XMLHttpRequest();
httpRequest.onreadystatechange=handleResponse;
httpRequest.open("GET",e.target.innehttpRequest=new XMLHttpRequest();rHTML+".html")
httpRequest.send()
}
function handleResponse(e){
if(e.target.readyState==XMLHttpRequest.DONE&&e.target.status==200){
document.getElementById("target").innerHTML=e.target.responseText;
}
}
</script>
</body>
</html>
第一步是创建一个新的XMLHttpRequest对象。与之前在DOM中见过的大多数对象不同，你并非通过浏览器定义的某个全局变量来访问这类对象，而是使用关键词new如：var httpRequest=new XMLHttpRequest();
下一步是给readystatechange事件设置一个事件处理器。这个事件会在请求过程中被多次触发，向你提供事情的进展情况。将onreadystatechange属性的值设为handleResponse;httpRequest.onreadystatechange=handleResponse;可以告诉XMLHttpRequest对象你想要做什么，使用open方法来指定HTTP方法（在这里是GET）和需要请求的URL:httpRequest.open("GET",e.target.innerHTML+".html")
注：上述展示的是open方法最简单的形式。你还可以给浏览器提供向服务器发送请求使用的认证消息，就如：httpRequest.open("GET",e.target.innerHTML+''.html",true,"adam","secret")最后两个参数是应当发送给服务器的用户和密码。剩下的那个参数指定了该请求是否应当异步执行。它应该始终设置为true.
注：GET请求适用于安全的交互行为，就是那些你可以反复发起而不会带来副作用的请求。POS请求用于不安全的交互行为，意思是每一个请求都会导致服务器端发生某种变化，而重复的请求可能会带来问题。虽然还有些别的HTTP方法，但GET和POST是使用最为广泛的。
函数的最后一步是调用send()方法，如：httpRequest.send()；上述例子里没有向服务器发送任何数据，所以send方法无参数可用。
ajax起步 （二）的更多相关文章
- 对jquery的ajax进行二次封装
第一种方法: $(function(){ /** * ajax封装 * url 发送请求的地址 * data 发送到服务器的数据,数组存储,如:{"username": " ...
- {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)
Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...
- Ajax实例二：取得新内容
Ajax实例二:取得新内容 通过点击pre和next按钮,从服务器取得最新内容. HTML代码 <div id="slide">图片显示区</div> &l ...
- {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)
{Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) Django基础七之 ...
- 对jquery的ajax进行二次封装以及ajax缓存代理组件：AjaxCache
虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或 ...
- Ajax 技术二
一.Ajax与XML案例 例:使用Ajax+XML读取数据表中的分类信息并放入下拉选框中 demo01.php 运行结果: 二.Ajax中的JSON 在Javascript中,可以通过两种方式(XML ...
- 从零开始学 Web 之 Ajax（二）PHP基础语法
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Java基础——Ajax（二）
一.jQuery 实现 ajax $(function(){ $("#userName").blur(function(){ // 发ajax请求 用的函数原型: $.get(ur ...
- MVC3学习：利用jquery+ajax生成二维码（支持中文)
二维码越来越热火了,做电子商务网站,不做二维码,你就OUT了. 一.下载DLL文件(ThoughtWorks.QRCode.dll),并在项目中引用.点此下载 如果你还不知道什么是QRCode二维码, ...
随机推荐
- NodeJS学习笔记 进阶 (7)express+session实现简易身份认证(ok)
个人总结: 这篇文章讲解了express框架中如何使用session,主要用了express-session这个包.更多可以参考npm.js来看,读完这篇文章需要10分钟. 摘选自网络: 文档概览 本 ...
- 20180929 北京大学 人工智能实践：Tensorflow笔记06
入戏 需要修改成如下: (完)
- 3D打印技术之切片引擎（6）
[此系列文章基于熔融沉积( fused depostion modeling, FDM )成形工艺] 这一篇文章说一下填充算法中的网格填充.网格填充在现有的较为成熟的引擎中是非常普遍的:skeinfo ...
- bzoj1066【SCOI2007】蜥蜴
1066: [SCOI2007]蜥蜴 Time Limit: 1 Sec Memory Limit: 162 MB Submit: 2512 Solved: 1238 [Submit][Statu ...
- 动态限制EdiText仅仅能输入特定字符
怎样设置EditText,使得仅仅能输入数字或者某些字母呢? 一.设置EditText,仅仅输入数字: 方法1:直接生成DigitsKeyListener对象就能够了. et_1.setKeyList ...
- vue24-webpack+vue-loader
手动配置自己: webpack+vue-loader webpack加载模块 ------------------------------------- 如何运行此项目? 1. npm install ...
- 如何测试WCF Rest
使用SoapUI 1.新建一个rest项目 2.双击上图中的Request1 查询的时候,Method选择post resource的地方要调整到对应的方法 查询的内容是用json格式发送 查询的的结 ...
- 冒泡排序算法 C#版
冒泡排序算法的运作如下: 1.比较相邻的元素.如果第一个比第二个大,就交换他们两个. 2.对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最大的数. 3.针对所 ...
- C#一些延时函数
sleep延时方法: System.Threading.Thread.Sleep(); //毫秒 在C#窗口程序中,如果在主线程里调用Sleep,在Sleep完成之前, 界面呈现出假死状态,不能响应任 ...
- Flex 集合 ArrayCollection 的使用
转:http://keren.iteye.com/blog/380847 转:http://callan.iteye.com/blog/335551 集合是ActionScript 中功能强大的基于索 ...