JavaScript复习笔记(1)—

基本过程

Ajax 提供异步通信和同步通信

核心为XMLHTTPRrequest（IE6不支持）

使用过程：

1.创建Ajax调用

2.向服务器发送请求open(参数1，参数2，参数3，[参数4]，[参数5])

　　参数1：请求方式，有GET和POST两种方法，GET性能好，但是会暴露数据，且数据有上限；POST不会暴露数据，且没有传输上限。

　　参数2：请求URL地址，注意路径

　　参数3：是否异步，true为异步

　　参数4和5：用户名密码

3.通过open方法将调用所需数据准备好，然后通过send方法发送请求。

4.接收服务器传回数据

readyState属性反应调用状态：

0——open方法尚未被调用（uninitialized）

1——open方法已被调用（loading）

2——send方法已被调用(loaded)

3——开始回传服务器的应答(interacting)

4——请求已完成（complete）

当readyState发生变化时会触发readystatechange事件，通过事件来判断状态

服务器状态：

200——服务器正常

将Ajax调用封装为函数

 1 function getHTTPObject(){
 2         var xhr;
 3         if (window.XMLHttpRequest) {//IE7及以上及其他浏览器
 4             xhr = new XMLHttpRequest();
 5         } else if(window.ActiveXObject){//IE6
 6             xhr = new ActiveXObject("Msxml2.XMLHTTP");
 7         }
 8         return xhr;
 9 }
10
11 function ajaxCall(dataUrl,callback){//请求地址，回调函数
12     var request = getHTTPObject();
13     request.onreadystatechange = function(){
14         if(request.readyState === 4 && request.status === 200){//ajax请求完成且服务器状态正常
15             console.log(request.responseText);
16             var contacts = JSON.parse(request.responseText);//将字符串转化为JSON
17             if(typeof callback === "function"){
18                 callback(contacts);//利用回调函数处理请求结果
19             }
20         }
21     }
22     request.open("GET",dataUrl,true);
23     request.send(null);
24 }

AJAX数据格式

XML	JSON	HTML
可扩展、符合DOM标准	易读、迅速灵活与平台无关、跨站容易	速度快、不需要解析
不能跨域名Ajax调用	语法对符号要求严格，容易被远程注入恶意脚本	无法精细控制

AJAX的易访问性

易于访问的富因特网应用程序Accessible Rich Internet Applications=ARIA

ARIA活动区域：

1.aria-atomic：当页面发生改变，屏幕阅读器根据该属性决定是否展示某个活动区域内的内容。

2.aria-busy：当活动区域内容正在更新，该值返回true；

3.aria-live：标识文档活动区域中内容变更的重要程度，off、polite、asserive

4.aria-relevant：标志单个活动区域内发生了何种变化，additions、removals、text、all

<div id="output" aria-atomic="true" aria-live="polite" aria-relevant="additions"></div>

改善用户体验

为用户的每一个操作提供反馈，告诉他们你正在用AJAX调用数据，于是修改前面的代码,橙色部分

 1 function getHTTPObject(){
 2         var xhr;
 3         if (window.XMLHttpRequest) {//IE7及以上及其他浏览器
 4             xhr = new XMLHttpRequest();
 5         } else if(window.ActiveXObject){//IE6
 6             xhr = new ActiveXObject("Msxml2.XMLHTTP");
 7         }
 8         return xhr;
 9 }
10 function ajaxCall(dataUrl,outputElement,callback){//请求地址，回调函数
11     var request = getHTTPObject();
12     outputElement.innerHTML = "Loading...";
13     request.onreadystatechange = function(){
14         if(request.readyState === 4 && request.status === 200){//ajax请求完成且服务器状态正常
15             console.log(request.responseText);
16             var contacts = JSON.parse(request.responseText);//将字符串转化为JSON
17             if(typeof callback === "function"){
18                 callback(contacts);//利用回调函数处理请求结果
19             }
20         }
21     }
22     request.open("GET",dataUrl,true);
23     request.send(null);
24 }

后退返回

History API

转载于:https://www.cnblogs.com/jellybaobao/p/3956264.html

JavaScript复习笔记(1)——AJAX相关推荐

JavaScript复习笔记
js复习笔记 js复习笔记,内容来源自廖雪峰JavaScript教程,w3school,菜鸟教程一.快速入门 1.基本语法 1)js是一种直译式脚本语言 2)js结束语句后的;可以省略不写,原因是执 ...
HTML+CSS+JavaScript复习笔记持更（一）——标签篇
前言博主现在还是在校生,目前大三,突然想起HTML的很多基础都忘记的差不多了,于是买了几本基础书,创建这篇博文用于记录复习笔记,也希望我自己在整理的时候,能帮助大家加深一些基础知识的印象,本篇博文将 ...
JavaScript学习笔记：AJAX基础
文章目录一.准备工作任务1.安装`phpstudy_pro`并启动`Apache`服务任务2.下载HBuilder X,创建HBuilder项目任务3.输入城市代码,返回城市天气预报信息 1. ...
Javascript学习笔记12——Ajax入门
Ajax:Asynchronous Javascript And XML.写个简单的例子: <body> <form id="form1" runat=" ...
HTML+CSS+JavaScript复习笔记持更（六）——CSS3常用属性之文本
文本相关文本相关,包含了文字样式和文本换行等格式文字文字是一个网页最基础的部分,文字主要有以下几种属性: 字体文字大小文字颜色水平对齐方式段首缩进方式语法格式: <!DOCTYP ...
JavaScript复习笔记(3)——数据类型（null、undefined、NaN）与深度克隆
JavaScript中的数据类型:Number.Boolean.String.Object.Function 但是此外还有一些容易混淆的类型如null.undefined.NaN.Array的概念 f ...
HTML+CSS+JavaScript复习笔记持更（十）——CSS3常用属性之定位
定位定位主要是用来设定元素在页面上的位置的,其代码为:position 定位有三种定位方式: static(无特殊定位,按照dom排序) absolute(绝对定位,往前面找最近的,有定位属性的元素 ...
HTML+CSS+JavaScript复习笔记持更（九）——CSS3常用属性之盒模型
盒模型盒模型是CSS中最最重要的概念之一了,这个概念比较抽象,它规定了元素框处理元素内容.外边距.内边距.边框的方式. 内.外边距的属性内边距:padding 外边距:margin 边框:bord ...
HTML+CSS+JavaScript复习笔记持更（八）——CSS3常用属性之列表
列表属性之前已经介绍过了列表标签.主要有有序列表和无序列表,为了更好地控制这两种列表,CSS还提供了这两种列表的样式设置. list-style(简写属性,把所有列表的属性设置写到一个声明中) li ...

JavaScript复习笔记(1)——AJAX

JavaScript复习笔记(1)——AJAX相关推荐

最新文章

热门文章