AJAX 入门介绍

2017-12-06 18:51:10来源:CSDN作者:hf872914334人点击

分享

AJAX概述

Asynchronous Javascript And XML:异步的JS和XML;

异步同步:

异步同步

Google在2001年,首次提出了AJAX的概念,用于“GoogleSuggest”效果中,实现无刷新无提交的页面内容局部更新。包含HTML、CSS、JS、DOM、HTTP、XML等技术——纯客户端技术。实现目标:
(1)无刷新的页面局部更新
(2)动态网页静态化,彻底剥离前端和后台技术

浏览器可以发起的请求类型:
(1)同步请求:地址栏输入URL、超链接、JS跳转、表单提交…
(2)异步请求:使用XMLHttpRequest对象发起的请求

请求与响应:

请求与响应

AJAX应用

AJAX应用的核心对象:XMLHttpRequest

支持:Ch//FF//Sa//IE9+不支持:IE8-:ActiveXObject(‘Microsoft.XMLHTTP’);作用:用于向服务器发起HTTP请求消息,并接收服务器返回的HTTP响应消息,解析响应消息内容,呈现在HTMLDOM树上。

构建对象(支持可以直接new)

var http=null;if(window.XMLHttpRequest){//Ch FF Sa IE9+    http=new XMLHttpRequest();}else{//IE8-    http=new ActiveXObject(‘Microsoft.XMLHTTP’);}

使用AJAX的步骤

(1)创建XHR对象    var xhr = new XMLHttpRequest();(2)监听XHR状态改变事件    xhr.onreadystatechange = function(){}(3)使用XHR连接到Web服务器    xhr.open(method, uri,  isAysn);(4)使用XHR对象发起异步的HTTP请求消息    xhr.send(null/data);

XHR对象的常用属性和方法

提示:XHR对象的作用:发起异步HTTP请求,并接收响应消息——整个过程程序员是不可见的,调试错误只能靠监视请求和响应消息。

XHR对象的成员属性:

readyState: 表示XHR的当前状态,即请求-响应过程进行到哪一步,可取值有5个,只能依次递增不能回退,自动改变不能手工赋值:        0 - UNSENT    请求消息尚未发送     1 - OPENED    已打开到服务器的连接     2 - HEADERS_RECEIVED  XHR已接收到响应消息起始行和头部     3 - LOADING   XHR正在响应消息的主体     4 - DONE      XHR已经接收完成响应消息

readyState

status: 响应消息状态码,只有xhr.readyState变为2后才有值statusText: 响应消息中原因短句,只有xhr.readyState变为2后才有值responseText: 响应消息的主体内容,当xhr.readyState变为3开始有值,变为4值稳定下来

XHR对象的成员事件:

onreadystatechange:xhr.readyState属性值的每次改变都会触发该事件

XHR对象的成员方法:

open(method, uri, isAsyn):  打开到服务器的连接send( body/null ):  发送请求消息setRequestHeader(name, value): 设置请求消息头部getResponseHeader(name): 获取响应消息头部getAllResponseHeaders(): 获取响应消息中的所有头部

AJAX请求

1.使用XHR对象发起GET请求

//1 创建一个XHR对象  new...var xhr = new XMLHttpRequest();//2 监听XHR的状态改变 on...xhr.onreadystatechange = function(){    if(xhr.readyState===4){        if(xhr.status===200){            console.log('响应完成且成功');        }else{            console.log('响应完成但存在问题');        }    }}//3 打开到Web服务器的连接 open...xhr.open('GET','1_check_uname.php?uname='+n, true);//4 发送请求消息 xhr.send(null);

2.使用XHR对象发起POST请求

//1 创建一个XHR对象  new...var xhr = new XMLHttpRequest();//2 监听XHR的状态改变 on...xhr.onreadystatechange = function(){    if(xhr.readyState===4){        if(xhr.status===200){            console.log('响应完成且成功');        }else{            console.log('响应完成但存在问题');        }    }}//3 打开到Web服务器的连接 open...xhr.open('POST','1_check_uname.php', true);//3.5 修改请求头部xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//4 发送请求消息  send...xhr.send('k1=v1&k2=v2&...');

Content-Type,内容类型,一般是指网页中存在的Content-Type,用于定义网络文件的类型和网页的编码,决定文件接收方将以什么形式、什么编码读取这个文件,这就是经常看到一些Asp网页点击的结果却是下载到的一个文件或一张图片的原因。

HTTP协议规定请求消息的Content-Type可能取值为:

(1)text/plain  —— PHP服务器拒绝接收 (2)application/x-www-form-urlencoded —— 请求数据编码后(3)multiplart/form-data —— 文件上传

HTTP协议规定响应消息的Content-Type可以取值为任意合法的MIME类型。但AJAX应用中,响应内容类型一般为:

(1)text/plain (2)text/html —— HTML片段(3)application/javascript —— JS片段(4)application/xml —— XML片段(5)application/json —— JSON片段

3.使用XHR接收响应消息——text/plain

服务器端发送响应消息:以PHP为例    header('Content-Type: text/plain');    echo '一段文本';客户端接收响应消息:    xhr.responseText;  //响应主体:一段文本

4.使用XHR接收响应消息——text/html

服务器端发送响应消息:以PHP为例    header('Content-Type: text/html');    echo '<li>丁丁</li><li>当当</li>';客户端接收响应消息:    parent.innerHTML = xhr.responseText;  //响应主体:一段HTML片段

5.使用XHR接收响应消息——application/javascript

服务器端发送响应消息:以PHP为例    header('Content-Type: application/javascript');    echo 'var span=document.createElement("span");            span.innerHTML="ABC";           document.body.appendChild(span);';客户端接收响应消息:    eval( xhr.responseText );  //响应主体:一段JS片段客户端XHR对象接收到字符串型响应消息,必须调用eval()加以执行。

6.使用XHR接收响应消息——application/xml

行业标准的字符串数据格式

服务器端发送响应消息:以PHP为例    header('Content-Type: application/xml');    echo '<?xml ?><prodcutList>....</productList>';客户端接收响应消息:    xhr.responseXML;  //响应主体:字符串,会被浏览器解析为一棵XML DOM树。

XML: eXtensible Markup Language,可扩展的标记语言。对于前端来讲,XML就是一种特殊的字符串格式,用于描述批量的复合型数据。

XML语法要求:

(1)标签名、属性、子标签都可以任意指定。(2)整个XML字符串有且只有一个根标签。(3)标签名有开始必需有结束;区分大小写。(4)标签可以有属性,值必需用单引号或双引号括起来。(5)标签可以嵌套,不能交叉

HTML、XML的关系—— 没有任何关系~!
HTML和XML的区别:

(1)HTML的标签都已经预定义好;XML的标签都是任意指定的;(2)HTML专用于描述网页的内容;XML专用于描述数据;(3)HTML语法不严格;XML语言严格!

7.使用XHR接收响应消息——application/json

行业标准的字符串数据格式,最常用最重要的请求方式!!

服务器端发送响应消息:以PHP为例    header('Content-Type: application/xml');    $list=[{...},{...},{...}];    echo json_encode($list);客户端接收响应消息:    var obj = JSON.parse(xhr.responseText)//响应主体:JSON字符串

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,用于描述批量的复合数据。 易于人阅读和编写。同时也易于机器解析和生成。 在Web项目中的应用:在Web服务器和浏览器之间传递数据

JSON字符串的语法:http://json.org/json-zh.html

JSON字符串示例:

JSON字符串1: '[10, 30, 50]'JSON字符串2: '[101, "西游记", 15.5, "2015-5-5"]'JSON字符串3: '{"bid":101, "name":"西游记","price":15.5}'JSON字符串4: '[{},{},{}]'

JSON格式和XML格式的区别:JSON更加的简单,处理速度更快,更适合于WEB应用!

PHP语言把数组转换为JSON字符串: $str = json_encode($arr)
PHP语言把JSON字符串转换为数组: $arr = json_decode($str)

JS语言把对象转换为JSON字符串: var str = JSON.stringify(obj)
JS语言把JSON字符串转换为对象: var obj = JSON.parse(str)

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台