大家好,又见面了,我是你们的朋友全栈君。
一.简介
1.AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
2.AJAX = 异步 JavaScript 和 XML。
3.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
二.原理:
1. 创建 XMLHttpRequest 对象
(1).XMLHttpRequest 对象:
所有现代浏览器均支持 XMLHttpRequest对象(IE5 和 IE6 使用ActiveXObject)
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
(2).variable=new XMLHttpRequest();
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
2.向服务器发送请求
(1).如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
xmlhttp.open(“GET”,”ajax_info.txt”,true);
xmlhttp.send();
说明:
open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
send(string)将请求发送到服务器。
string:仅用于 POST 请求
(2)get/post区别
更新服务器上的文件或数据库 使用post
向服务器发送大量数据(POST 没有数据量限制)
(3).get请求
一个简单的 GET 请求:
xmlhttp.open(“GET”,”/try/ajax/demo_get.php”,true);
xmlhttp.send();
————————————————
在上面的例子中,您可能得到的是缓存的结果。
为了避免这种情况,请向 URL 添加一个唯一的 ID:
xmlhttp.open(“GET”,”/try/ajax/demo_get.php?t=” + Math.random(),true);
xmlhttp.send();
————————————————
如果您希望通过 GET 方法发送信息,请向 URL 添加信息:
xmlhttp.open(“GET”,”/try/ajax/demo_get2.php?fname=Henry&lname=Ford”,true);
xmlhttp.send();
(4).post请求
一个简单 POST 请求:
xmlhttp.open(“POST”,”/try/ajax/demo_post.php”,true);
xmlhttp.send();
—————————————————
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
xmlhttp.open(“POST”,”/try/ajax/demo_post2.php”,true);
xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
xmlhttp.send(“fname=Henry&lname=Ford”);
3.服务器 响应
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
说明:
responseText获得字符串形式的响应数据。
responseXML获得 XML 形式的响应数据。
例如:
(1).document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;
————————————————————–
(2).xmlDoc=xmlhttp.responseXML;
txt=””;
x=xmlDoc.getElementsByTagName(“ARTIST”);
for (i=0;i
{
txt=txt + x[i].childNodes[0].nodeValue + “
“;
}
document.getElementById(“myDiv”).innerHTML=txt;
4.onreadystatechange 事件
1).当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
2).说明:
(1).onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
(2)readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
(3)status
200: “OK”
404: 未找到页面
3).例如
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;
}
}
注意: onreadystatechange 事件被触发 5 次(0 – 4),对应着 readyState 的每个变化。
5.Ajax XML
获取我收藏的 CD
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open(“GET”, “cd_catalog.xml”, true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table=”
ArtistTitle”;
var x = xmlDoc.getElementsByTagName(“CD”);
for (i = 0; i
table += “
” +
x[i].getElementsByTagName(“ARTIST”)[0].childNodes[0].nodeValue +
“
” +
x[i].getElementsByTagName(“TITLE”)[0].childNodes[0].nodeValue +
“
“;
}
document.getElementById(“demo”).innerHTML = table;
}
W3Cschool菜鸟教程离线版下载链接
请在电脑上打开以下链接进行下载w3cschool 离线版(chm):http://pan.baidu.com/s/1bniwRCV(最新,2014年10月21日更新)w3cschool 离线版(htm …
菜鸟教程 Python100例 之实例29
学习编程的路,走得好艰辛… 为了巩固基础知识,把菜鸟教程网上的实例拿来练习.. 在做到实例29时,看了网站给出的代码,觉得可以加强一下功能,不由得动了一下脑筋,如下: 原文题目: 题目:给一个不多 …
【转载】jQuery Validate 菜鸟教程
文章1:http://www.runoob.com/jquery/jquery-plugin-validate.html (jQuery Validate 菜鸟教程)
Http状态码大全(来自菜鸟教程)
HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准. HTTP是一个基于TCP/IP通信 …
菜鸟教程之学习Shell script笔记(下)
菜鸟教程Shell script学习笔记(下) 以下内容是学习菜鸟教程之shell教程,所整理的笔记 菜鸟教程之shell教程:http://www.runoob.com/linux/linux-sh …
菜鸟教程之学习Shell script笔记(中)
菜鸟教程Shell script学习笔记(中) 以下内容是学习菜鸟教程之shell教程,所整理的笔记 菜鸟教程之shell教程:http://www.runoob.com/linux/linux-sh …
菜鸟教程之学习Shell script笔记(上)
菜鸟教程之学习Shell script笔记 以下内容是,学习菜鸟shell教程整理的笔记 菜鸟教程之shell教程:http://www.runoob.com/linux/linux-shell.ht …
C语言经典例题(菜鸟教程100例)
学习c语言基础,怎么能少了菜鸟教程上的100道例题呢,这里整理一下每道题的链接,希望大家能享受学习的乐趣 1,有1,2,3,4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 2,企业发放 …
学习笔记之HTML 教程 | 菜鸟教程
HTML 教程 | 菜鸟教程 http://www.runoob.com/html/html-tutorial.html 菜鸟教程在线编辑器 http://www.runoob.com/try/try …
随机推荐
Objective-C语法之KVO使用
本文转自:http://blog.csdn.net/yuquan0821/article/details/6646400/ 一,概述 KVO,即:Key-Value Observing,它提供一种机制 …
MyEclipse默认标签TODO,XXX,FIXME和自定义标签的使用
MyEclipse默认标签TODO,XXX,FIXME和自定义标签的使用 MyEclipse中的一些特殊的注释技术包括:1. // TODO —— 表示尚未完成的待办事项.2. // XX …
LR_问题_无法使用LR的Controller,提示缺少license
问题描述 无法使用LR的Controller,提示缺少license 问题解决 使用开始->所有程序->HP LoadRunner->loadrunner,在打开界面的左上角选择co …
[转]jquery中使用event.target的几点
转自: http://www.cnblogs.com/12go/archive/2011/12/28/2304502.html 1.this和event.target的区别: js中事件是会冒泡的,所 …
loadrunner入门篇-Vuser发生器
Vuser 发生器(Visual User Generator,VuGen),主要通过捕获客户端向服务器发送的HTTP请求,将这些请求录制成脚本,在回放时将捕获的HTTP请求再次发送,以达到模拟客户行 …
struts2之拦截器
1. 为什么需要拦截器 早期MVC框架将一些通用操作写死在核心控制器中,致使框架灵活性不足.可扩展性降低, Struts 2将核心功能放到多个拦截器中实现,拦截器可自由选择和组合,增强了灵活性,有利于 …
使用Hexo+Github一步步搭建属于自己的博客(基础)
前言:电脑系统为window 10专业版,64位 相关步骤: 1.安装Node.js和配置好Node.js环境,打开cmd命令行,成功界面如下 2.安装Git和配置好Git环境,安装成功的象征就是在电 …
OpenGL10-骨骼动画原理篇(1)
视频教程请关注 http://edu.csdn.net/lecturer/lecturer_detail?lecturer_id=440 本例程展示如何建立骨骼动画,有些人叫蒙皮动画 定义如下: 当前 …
Android开发之实现多次点击事件
在Android中给我们提供了单次点击事件.但并没有给我们提供双击,或者实现在一定时间内的多次事件.所以需要我们自己在单机监听上进行修改实现. 有如下两种实现方式: 1.定义一个存贮上一个第一次点击的 …
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/126606.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...