笔记-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. 利用tensorboard将数据可视化

    注:代码是网上下载的,但是找不到原始出处了,侵权则删 先写出visual类: class TF_visualizer(object): def __init__(self, dimension, ve ...

  2. 20200227英语上课笔记 about advantage and disadvantage

    Hello and welcome to class! Remember to keep your microphone off when you are not speaking Pronuncia ...

  3. js三种常见的对话框

    js中的对话框事通过调用window对象的alert()  confirm()  和 prompt()来获得,完成人机交互. 1. 警告框alert() function alert(){ // 弹出 ...

  4. 解密国内BAT等大厂前端技术体系-美团点评之上篇(长文建议收藏)

    引言 进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也 ...

  5. 全局下的isFinite

     isFinite() 函数用于检查其参数是否是无穷大 1. 他是一个全局对象,可以在js代码中直接使用 2. isFinite() 函数用于检查其参数是否是无穷大. 3. 如果 number 是有限 ...

  6. linux 命令——screen

    最近遇到一个东西aria2,这个玩意,这个是啥呢?Aria2是一个轻量级Linux下载软件,支持HTTP/HTTPS, FTP, SFTP, BitTorrent和磁力链接(官方版),公司系统插件配套 ...

  7. synchronized锁机制的实现原理

    Synchronized 锁机制的实现原理 Synchronized是Java种用于进行同步的关键字,synchronized的底层使用的是锁机制实现的同步.在Java中的每一个对象都可以作为锁. J ...

  8. 【C语言】逗号运算符的使用举例

    #include<stdio.h> int main(void) { , b = , c = , y, z; y = a + b, a + c;/*由y=a+b和a+c组成的逗号表达式*/ ...

  9. 关于 checkbox 的一些操作

    获取checkbox选中的状态 $("#checkbox").is(":checked"); 设置 checkbox 的状态 $("#checkbox ...

  10. python练习:编写一个函数isIn,接受两个字符串作为参数,如果一个字符串是另一个字符串的一部分,返回True,否则返回False。

    python练习:编写一个函数isIn,接受两个字符串作为参数,如果一个字符串是另一个字符串的一部分,返回True,否则返回False. 重难点:定义函数的方法.使用str类型的find()函数,可以 ...