笔记-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. 题解【洛谷P5436】【XR-2】缘分

    题目背景 世间万物都置身于缘分编织的大网中.缘分未到,虽历经千劫,却不能相遇.缘分到了,在草原上都能等到一艘船.--<一禅小和尚> 题目描述 一禅希望知道他和师父之间的缘分大小.可是如何才 ...

  2. php 接口获取公网ip并获取天气接口信息

    <?php function get_ip(){ //判断服务器是否允许$_SERVER if(isset($_SERVER)){ if(isset($_SERVER['HTTP_X_FORWA ...

  3. SpringMVC注解@RequestMapping全面解析

    @RequestMapping 可以出现在类级别上,也可以出现在方法上.如果出现在类级别上,那请求的 url 为 类级别上的@RequestMapping + 方法级别上的 @RequestMappi ...

  4. Integer数值小于127时使用==比较的坑

    Java在处理Integer时使用了一个缓存,其中缓存了-128到127之间的数字对应的Integer对象,所以在绝大多数情况下,当我们把2个小于128的Integer对象用==比较时,Java往往是 ...

  5. opencv：截取 ROI 区域

    Rect roi; roi.x = 100; roi.y = 100; roi.width = 250; roi.height = 200; // 截取 ROI 区域 // 这种方式改变 sub,原图 ...

  6. TensorFlow 模型的保存与载入

    参考学习博客: # https://www.cnblogs.com/felixwang2/p/9190692.html 一.模型保存 # https://www.cnblogs.com/felixwa ...

  7. WLC license管理

    关于控制器的license,可以参考对应平台的Datasheet: Cisco 2504 WLC Cisco 3504 WLC Cisco 5508 WLC Cisco 5520 WLC Cisco ...

  8. Go语言基础之Path包与FilePath包

    文章引用自 path包的使用 package main; import ( "fmt" "path" ) //go语言path包的学习 func main() ...

  9. Jmeter_请求原件之参数化CSV

    1.用途:注册10个账户 2.用CSV 制造数据相对比TEXT更方便 3.创建CSV 文件,注册账户和密码如下 4.Jmeter设置如下 因为是注册10个账户,要运行10次 5.线程组->添加- ...

  10. LCT 维护边双 / 点双的模板

    用 \(\text{LCT}\) 维护边双的做法是:加入一条非树边时,将这段树上路径合并为一个点代表这个边双,具体实现用并查集合并点,在 \(\text{Splay}\) 与 \(\text{Acce ...