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二维码, ...
随机推荐
- HDU 3342 Legal or Not(判断环)
Problem Description ACM-DIY is a large QQ group where many excellent acmers get together. It is so h ...
- Mojom IDL and Bindings Generator
Mojom IDL and Bindings Generator This document is a subset of the Mojo documentation. Contents Overv ...
- ubuntu18.04安装dash-to-dock出错的问题
之前在安装dash-to-dock出现了这种错误: TypeError: ExtensionUtils.initTranslations is not a function Stack trace:i ...
- HDU 4976 A simple greedy problem. 贪心+DP
题意: 给定n<=1000个小兵,A每次都能使小兵掉1点血,B每次能使所有小兵掉1点血,A.B轮流攻击,每次轮到A他会选择是否攻击,轮到B必须攻击.求A最多能杀死多少小兵.(当小兵血量为1时被攻 ...
- C++ 容器(一):顺序容器简介
C++提供了使用抽象进行高效编程的方式,标准库中定义了许多容器类以及一系列泛型函数,使程序员可以更加简洁.抽象和有效地编写程序,其中包括:顺序容器,关联容器和泛型算法.本文将简介顺序容器(vector ...
- 三种记录 MySQL 所执行过的 SQL 语句的方法
程式 Debug 有時後從前面第一行追起來很辛苦(程式碼太多或 compile 過), 另一種做法就是從後面追起來, 反正最後寫入的是 DB, 那就從 DB 開始往前推, 所以就是要抓程式是執行哪些 ...
- [Python] Boolean Or "Mask" Index Arrays filter with numpy
NumPy Reference: Indexing Integer array indexing Boolean array indexing Note: The expression a < ...
- UVA 11991 Easy Problem from Rujia Liu?【STL】
题目链接: option=com_onlinejudge&Itemid=8&page=show_problem&problem=3142">https://uv ...
- 动态网页爬取样例(WebCollector+selenium+phantomjs)
目标:动态网页爬取 说明:这里的动态网页指几种可能:1)须要用户交互,如常见的登录操作:2)网页通过JS / AJAX动态生成.如一个html里有<div id="test" ...
- linux添加开机启动项的方法介绍
使用chkconfig命令可以查看在不同启动级别下课自动启动的服务(或是程序),命令格式如下:chkconfig --list可能输出如下:openvpn 0:关闭 1:开启 ...... 6:关闭 ...