AJAX 入门介绍
2017-12-06 15:53
330 查看
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已经接收完成响应消息
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)
相关文章推荐
- ajax心得1--ajax入门介绍
- ajax心得1--ajax入门介绍
- AJAX 入门介绍 - (3) 整合 XML 和 DOM
- AJAX入门介绍 - GET 和 POST 配合表单
- AJAX 入门介绍 - 整合 XML 和 DOM
- ASP.NET AJAX入门系列之:UpdateProgress控件简单介绍
- ASP.NET AJAX入门系列:UpdateProgress控件简单介绍
- Ajax【介绍、入门、解决Ajax中文、跨域、缓存】
- Ajax介绍及入门--原生JavaScript使用GET方法
- vue发送ajax --axios入门介绍
- DWR 入门介绍-Ajax
- ASP.NET AJAX入门系列之:UpdateProgress控件简单介绍
- Ext 介绍入门之 Manual:Core:Ext.Ajax 类
- Javaweb学习之Ajax介绍
- (转)漫游Kafka入门篇之简单介绍
- 配置文件入门 - WebConfig.config常用配置节点介绍
- Microsoft Ajax Minifier 介绍
- MyBatis笔记01 - 入门介绍
- Ajax入门
- IOS 入门介绍2------iOS里面Frameworks介绍