笔记-AJAX

1.      简介

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

AJAX是基于现有的Internet标准开发的：

XMLHttpRequest 对象 (异步的与服务器交换数据)

JavaScript/DOM (信息显示/交互)

CSS (给数据定义样式)

XML (作为转换数据的格式)

注意：AJAX应用程序与浏览器和平台无关的！

2.      使用

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script>

function loadXMLDoc()

{

var xmlhttp;

if (window.XMLHttpRequest)

{

//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttp=new XMLHttpRequest();

}

else

{

// IE6, IE5 浏览器执行代码

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);

xmlhttp.send();

}

</script>

</head>

<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>

<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>

</html>

代码很简单，原理也很简单，触发事件，调用函数，向服务器发送请求，得到返回值，修改网页元素属性；

但为什么xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);

xmlhttp.send();

放在后面？

把onreadystatechange当做属性就可以了，当该属性被触发时调用function()

2.1.    实现原理解释

XMLHttpRequest 是 AJAX 的基础。

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2.1.1.   创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

2.1.2.   向服务器发送请求

如需将请求发送到服务器，我们使用 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.1.3.  
服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性

描述

responseText

获得字符串形式的响应数据。

responseXML

获得 XML 形式的响应数据。

2.2.   
onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性

描述

onreadystatechange

存储函数（或函数名），每当
readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

status

200:
"OK"
404: 未找到页面

使用回调函数

回调函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

笔记-AJAX的更多相关文章

  1. [学习笔记]AJAX学习

    AJAX学习 ——在w3cschool学习AJAX的学习笔记 参考网站:w3cschool XMLHttpRequest 是 AJAX 的基础. XMLHttpRequest 对象 所有现代浏览器均支 ...

  2. Jquery学习笔记 --ajax删除用户，使用了js原生ajax

    主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 <!DOCTYPE html> 2 <html lang= ...

  3. loadrunner 学习笔记--AJAX（转）

    用loadrunner测试WEB程序的时候总是会碰到AJAX或者ActiveX实现的功能,而通常这些功能会包含很多客户端函数(一般为JavaScript).我们该如何处理?如果从功能实现的角度去考虑这 ...

  4. jquery学习笔记----ajax使用

    一.load() 加载页面数据 load(url,[data],[callback]) url:加载的页面地址,[data]传送的数据,[callback]加载完成时回调函数. 设计一个load.ht ...

  5. jquery学习笔记-----ajax

    $(selector).load( url [,date] [,callback] ) url:请求页面的url地址 date:发送至服务器的key:value数据 callback:请求完成时的回调 ...

  6. JavaWeb笔记——ajax异步请求

     1. ajax是什么?   * asynchronous javascript and xml:异步的js和xml   * 它能使用js访问服务器,而且是异步访问   * 服务器给客户端的响应一般是 ...

  7. 20151210 Jquery 学习笔记 AJAX 进阶

    一．加载请求 在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题.而超 过一定时间的请求,用户就会变得不再耐烦而关闭页面.而如果在请求期间能给用户一些提 示,比如:正在努力加 ...

  8. 20151209jquery学习笔记Ajax 代码备份

    /*$(function () { $("input").click(function() { $.ajax({ type:'POST', url:'test.php', data ...

  9. 20151207jquery 学习笔记 Ajax

    .load()方法是局部方法,因为他需要一个包含元素的 jQuery 对象作为前缀.而$.get()和 $.post()是全局方法,无须指定某个元素.对于用途而言,.load()适合做静态文件的异步获 ...

随机推荐

  1. 10day rpm简单用法qa ql qf "`"用法

    查看软件是否安装: [root@oldboyedu ~]# rpm -qa sl -q表示查询 -a表示所有 sl-5.02-1.el7.x86_64 查看软件包中有哪些信息 [root@oldboy ...

  2. Docker - Docker 镜像 简介

    概述 简单介绍一下 docker 镜像的概念 1. 背景 复习 docker 镜像是 docker 最基础, 最重要的概念之一 所以正式使用之前, 最好有所理解和认识 2. 镜像 概述 简单描述 理解 ...

  3. Go_channel

    通道可以被认为是Goroutines通信的管道.类似于管道中的水从一端到另一端的流动,数据可以从一端发送到另一端,通过通道接收. 在前面讲Go语言的并发时候,我们就说过,当多个Goroutine想实现 ...

  4. ORACLE_BASE、ORACLE_HOME有什么区别

    ORACLE_BASE.ORACLE_HOME有什么区别   ORACLE_BASE下是admin和productORACLE_HOME下则是ORACLE的命令.连接库.安装助手.listener等等 ...

  5. 手机CPU那些事

    原文:https://zhuanlan.zhihu.com/p/19923974 如今人们买手机,都比较关心采用了什么 CPU,因为 CPU 直接决定了这台手机的性能,CPU 之于手机 就好比人的大脑 ...

  6. vue卸载与安装+vue创建项目

    vue卸载 npm uninstall -g vue-cli npm install -g @vue/cli 和 npm install -g @vue/cli-init 命令安装新版本vue-cli ...

  7. Bug搬运工-CSCvn51483:AP datasheet should contain info if the AP contains or not temperature sensor

    目前在老一些的思科AP上,应该都没有温度传感器的功能(例如AP1600,wave 1 AP1700...),但是在思科官方没有明确的文档去说明这个问题. 在Outdoor AP(室外AP,例如AP15 ...

  8. H2知识小结

    1.官网: http://www.h2database.com/html/main.html file:///E:/Develop/H2/docs/html/tutorial.html#web_app ...

  9. fiddler的代理设置

    fiddler通过监听系统的8888端口实现对系统浏览器发出的http报文进行截获监听,因此要使fiddler能够监听到浏览器数据,需要对浏览器设置代理端口 浏览器 <--8888端口代理--& ...

  10. mongodb 用户指引

    维护人:陈权 一.mongodb install on linuxcurl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.0.6 ...