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起步 （二）的更多相关文章

  1. 对jquery的ajax进行二次封装

    第一种方法: $(function(){ /** * ajax封装 * url 发送请求的地址 * data 发送到服务器的数据,数组存储,如:{"username": " ...

  2. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...

  3. Ajax实例二：取得新内容

    Ajax实例二:取得新内容 通过点击pre和next按钮,从服务器取得最新内容. HTML代码 <div id="slide">图片显示区</div> &l ...

  4. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)   Django基础七之 ...

  5. 对jquery的ajax进行二次封装以及ajax缓存代理组件：AjaxCache

    虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或 ...

  6. Ajax 技术二

    一.Ajax与XML案例 例:使用Ajax+XML读取数据表中的分类信息并放入下拉选框中 demo01.php 运行结果: 二.Ajax中的JSON 在Javascript中,可以通过两种方式(XML ...

  7. 从零开始学 Web 之 Ajax（二）PHP基础语法

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. Java基础——Ajax（二）

    一.jQuery 实现 ajax $(function(){ $("#userName").blur(function(){ // 发ajax请求 用的函数原型: $.get(ur ...

  9. MVC3学习：利用jquery+ajax生成二维码（支持中文)

    二维码越来越热火了,做电子商务网站,不做二维码,你就OUT了. 一.下载DLL文件(ThoughtWorks.QRCode.dll),并在项目中引用.点此下载 如果你还不知道什么是QRCode二维码, ...

随机推荐

  1. C#中Request.Cookies 和 Response.Cookies 的区别分析

    .NET中提供了读写Cookie的多种方法,Request.Cookies 是客户端通过 Cookie 标头形式由客户端传输到服务器的 Cookie:Response.Cookies 在服务器上创建并 ...

  2. mongodb 的索引

                索引加快了查询速度,但是降低了写入速度.所以不要在没必要的属性上加索引.             在 mongodb 中索引可以按倒序/正序创建,便于排序.           ...

  3. CodeForces 337A Puzzles

    Puzzles Time Limit: 1000ms Memory Limit: 262144KB This problem will be judged on CodeForces. Origina ...

  4. ArcGIS api for javascript——地图配置-定制平移动画

    描述 本例展示了当用户点击平移按钮时如何定制地图的动画.panDuration和panRate是Dojo动画属性,可以分别确定动画的duration和帧刷新的rate.这些属性的单位都是毫秒,panD ...

  5. 解决MAC下PHP连接MYSQL错误Warning: mysql_connect(): No such file or directory in conn.php

    今天在mac上用php去连接mysql数据库,出现了 mac PHP Warning:  mysql_connect(): [2002] No such file... 详细例如以下所看到的: Dir ...

  6. android-继承BaseAdapter--自己定义适配器，getView运行多次的解决方法

    定义的getView运行多次的ListView布局: <ListView android:id="@+id/lv_messages" android:layout_width ...

  7. lvs为何不能完全替代DNS轮询--转

    原文地址:http://mp.weixin.qq.com/s?__biz=MjM5ODYxMDA5OQ==&mid=2651959595&idx=1&sn=5f0633afd2 ...

  8. Snort企业部署实战

    Snort企业部署实战 1 背景       我们知道企业网络目前威胁来自两个位置:一个是内部,一个是外部.来自外部的威胁都能被防火墙所阻止,但内部攻击都不好防范.因为公司内部人员对系统了解很深且有合 ...

  9. 【引用】Android程序实现完全退出

    这是我在网上找到的,方法不错,都能够实现程序的完全退出http://www.jb51.net/article/37992.htm

  10. GHO文件内IE主页的修改方法

    修改方法: 1.先打开映像  GHOSTexp 打开GHO文件 2.提取注册表文件  C:\WINDOWS\SYSTEM32\CONFIG 下就是系统的注册表文件,详细见下 3.打开本地的注册表,加载 ...