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. php session目录无法写进数据的问题

    打算开启php的session功能,并将session信息存到文件里. 修改php.ini,开启session功能: #将session信息存到文件中session.save_handler = fi ...

  2. tensorflow-gpu

    1.Cuda 查看Cuda支持的GPU型号:https://developer.nvidia.com/cuda-gpus 下载cuda:https://developer.nvidia.com/cud ...

  3. bzoj 2259: [Oibh]新型计算机 最短路 建模

    Code: #include<cstdio> #include<cstring> #include<algorithm> #include<queue> ...

  4. MySql系列之初识

    数据库管理软件的由来 基于我们之前所学,数据要想永久保存,都是保存于文件中,毫无疑问,一个文件仅仅只能存在于某一台机器上. 如果我们暂且忽略直接基于文件来存取数据的效率问题,并且假设程序所有的组件都运 ...

  5. linux学习之多高并发服务器篇（一）

    高并发服务器 高并发服务器 并发服务器开发 1.多进程并发服务器 使用多进程并发服务器时要考虑以下几点: 父最大文件描述个数(父进程中需要close关闭accept返回的新文件描述符) 系统内创建进程 ...

  6. Spring Cloud学习笔记【六】Hystrix 监控数据聚合 Turbine

    上一篇我们介绍了使用 Hystrix Dashboard 来展示 Hystrix 用于熔断的各项度量指标.通过 Hystrix Dashboard,我们可以方便的查看服务实例的综合情况,比如:服务调用 ...

  7. Android Studio的Signature Versions选择,分别是什么意思

    转自原文 Android Studio的Signature Versions选择,分别是什么意思 打包一个文件的签名版本, 选V1打包出来的app是jar的(一般这种就是当做第三方导入项目来用的), ...

  8. [Poi] Customize Babel to Build a React App with Poi

    Developing React with Poi is as easy as adding the babel-preset-react-appto a .babelrc and installin ...

  9. awk条件语句

    条件语句用于在运行操作之前做一个測试.在前面的章节中,我们看到了模式匹配规则的一些演示样例. 模式匹配规则本质上就是影响输入循环的条件表达式. 在这一部分,我们主要就在action中所使用的条件语句进 ...

  10. 用eclipse 检索SVN 上 myEclipse 建的web项后,成java项目解决方法

    用eclipse 检索SVN 上 myEclipse 建的web项后,成java项目解决方法 在网上找了非常多,都无论用. 说添加.project 文件几个属性.但我发现里面都有,在我这里无论什么用. ...