ajax的来龙去脉
这是我在博客园写的第一遍博客,之前都是只看不写,在园子里学到了不少的东西,现在也想着把自己的一些感悟写出来给大家分享一下。
ajax技术可以说是Web2.0应用程序的技术基础,尽管软件经销商和开源社区提供很多ajax的框架,但是我们仍然有必要理解ajax实现的来龙去脉。
首先要说的是HTTP请求,因为ajax是基于HTTP请求的,所以说ajax就必须要从HTTP请求说起。我们知道我们上网的过程就是浏览器和服务器进行文件传输的过程,而他们之间之所以能够进行传输文件肯定是遵守了一定的规范,而HTTP规范就是浏览器和服务器进行文件传输的规范之一。
HTTP(Hyper Text Transfer Protocol)超文本传输协议,它对浏览器向服务器的请求和服务器对浏览器的响应都进行了规范,所以HTTP主要包括请求和响应两部分。请求主要包括请求行,请求头和请求主体三部分。
这里需要注意的是,用get请求方式请求的时候请求的内容是拼接在URL后面的,而用post请求的时候,请求的内容是放在请求主体里面。还有就是用post请求方式进行请求的时候请求头里要设置Content-Type这个属性而用get请求的时候则不需要。
相对应的服务器向浏览器的响应包括了相应行,响应头和响应主体三部分
说完了HTTP请求,我们就可以来说一下Ajax技术了,ajax不是一种新的语言而是对现有技术的综合利用。本质是在HTTP协议的基础上以异步的方式与服务器进行通讯。而ajax就是Asynchronous JavaScript And XML 四个单词的缩写,Asynchronous是异步的意思,指某段程序执行时不会阻塞其他程序的执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步。ajax利用一个构建到现代浏览器的一个内置对象 XMLHttpRequest对象来实现异步接收和发送HTTP请求和相应信息。
下面我们就结合实际代码来体会一下,ajax怎么实现与后代的数据相互的
=====get=====
//设置请求行
xhr.open('get','02.php?name=zhang&age=18');
//设置请求头
//get 不用设置
//post必须设置
//设置请求主体
//如果是get null post要把请求的内容放在里面
xhr.send(null);
=====post====
//设置请求行
xhr.open('post');
//设置请求头
//get 不用设置
//post必须设置
xhr.setRequestHeader('Content-Type','application/x-www-form- urlencoded');
//设置请求主体
//如果是get null post要把请求的内容放在里面
xhr.send('02.php?name=zhang&age=18');
这样就利用XMLHttpRequest对象实现了一次浏览器向服务器的一次请求,下面就是处理响应
//监听响应状态的变化
xhr.onreadystatechange = function(){
if ( xhr.status == 200 && xhr.readyState == 4 ){
//当响应的状态为4 HTTP的状态为200的时候 处理响应的内容 }
}
下面是XMLHttpRequest的一些响应的属性
当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态:一直等待直到请求被处理;然后,它才接收一个响应。这样以来,脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性,如表格1所示。
表格1.XMLHttpRequest对象的ReadyState属性值列表。
ReadyState取值 |
描述 |
0 |
描述一种"未初始化"状态;此时,已经创建一个XMLHttpRequest对象,但是还没有初始化。 |
1 |
描述一种"发送"状态;此时,代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。 |
2 |
描述一种"发送"状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。 |
3 |
描述一种"正在接收"状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。 |
4 |
描述一种"已加载"状态;此时,响应已经被完全接收。 |
onreadystatechange事件
无论readyState值何时发生改变,XMLHttpRequest对象都会激发一个readystatechange事件。其中,onreadystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变,该对象都将激活。
responseText属性
这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时,responseText包含一个空字符串。当readyState值为3(正在接收)时,响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时,该responseText包含完整的响应信息。
responseXML属性
此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应;此时,Content-Type头部指定MIME(媒体)类型为text/xml,application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一,那么responseXML的值为null。无论何时,只要readyState值不为4,那么该responseXML的值也为null。
其实,这个responseXML属性值是一个文档接口类型的对象,用来描述被分析的文档。如果文档不能被分析(例如,如果文档不是良构的或不支持文档相应的字符编码),那么responseXML的值将为null。
status属性
这个status属性描述了HTTP状态代码,而且其类型为short。而且,仅当readyState值为3(正在接收中)或4(已加载)时,这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。
statusText属性
这个statusText属性描述了HTTP状态代码文本;并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。
到这里Ajax的“A”和“J"已经说完了 现在还有一个X没有说,我们知道X是XML的意思,那么XML到底是什么东西呢,XML是一种标记语言,很类似HTML,其宗旨是用来传输数据,具有自我描述性(固定的格式的数据),下面的代码 是一个例子
<?xml version="1.0" encoding="UTF-8"?> //
//一定要有一个root节点
//root里面的东西可以自定义
<root>
<array>
<item>
<picture>apple</picture>
<oldPrice>100</oldPrice>
<newPrice>10</newPrice>
</item>
<item>
<picture>apple</picture>
<oldPrice>100</oldPrice>
<newPrice>10</newPrice>
</item>
<item>
<picture>apple</picture>
<oldPrice>100</oldPrice>
<newPrice>10</newPrice>
</item>
</array>
</root>
语法规则
1、必须有一个根元素
2、不可有空格、不可以数字或.开头、大小写敏感
3、不可交叉嵌套
4、属性双引号(浏览器自动修正成双引号了)
5、特殊符号要使用实体
6、注释和HTML一样
现在我们把ajax的四个单词都介绍完了,我们结合一个综合的案例用ajax把一个XML数据异步渲染在页面上,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table{
border-collapse: collapse;
}
td,th{
border: 1px solid #ccc;
height: 50px;
text-align: center;
padding: 0 20px;
}</style>
</head>
<body>
<table>
<thead>
<tr>
<th>图片地址</th>
<th>原始价格</th>
<th>折后价格</th>
</tr>
</thead>
<tbody> </tbody>
</table>
</body>
<script type="text/javascript">
//获取异步对象
var xhr = new XMLHttpRequest();
//设置请求头
xhr.open('get','03.php');
//设置请求主体
xhr.send(null); //监听响应状态
xhr.onreadystatechange = function(){
if( xhr.readyState == 4 && xhr.status == 200 ){
//接收XML文件
//console.log(xhr.responseXML)
var XMLDom = xhr.responseXML;
//获取XML数据里面的内容
var items = XMLDom.querySelectorAll('item');
var renderDom = document.querySelector('tbody');
var renderHtml = ''; for ( var i = 0; i < items.length; i++ ){
//遍历数据 获取每个数组里的内容
var item = items[i];
var picDom = item.querySelector('pic');
var oldDom = item.querySelector('oldPrice');
var newDom = item.querySelector('newPrice'); //获取每个标签里的值
var pic = picDom.innerHTML;
var old = oldDom.innerHTML;
var ne = newDom.innerHTML;
//把XML里面的数据值 拼接在HTML标签里
renderHtml += '<tr>';
renderHtml += '<td>'+pic+'</td>';
renderHtml += '<td>'+old+'</td>';
renderHtml += '<td>'+ne+'</td>';
renderHtml += '</tr>';
}
//渲染到页面上
renderDom.innerHTML = renderHtml;
}
}
</script>
</html>
到现在整个Ajax的基本含义上面有了一个整体的解释,但是XMLHttpRequest在IE6以下的版本是没有提供的但是提供了一个ActiveObject("Microsoft.XMLHTTP")的属性,如果要兼容IE的早期的浏览器,要做一个简单的判断
if( window.XMLHttpRequest ){
var xhr = new XMLHttpRequest();
} eles {
var xhr = new ActiveXObject("Micsoft.XMLHTTTP")
ajax的来龙去脉的更多相关文章
- AJAX的来龙去脉(由来)-如何被封装出来的--ajax发送异步请求(四步操作)
<黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...
- 走进JavaWeb技术世界1:Web后端与J2EE的由来
转自:微信公众号 码农翻身 这个问题来自于QQ网友,一句两句说不清楚,索性写个文章. 我刚开始做Web开发的时候,根本没有前端,后端之说. 原因很简单,那个时候服务器端的代码就是一切:接受浏览器的请求 ...
- python 全栈开发,Day97(Token 认证的来龙去脉,DRF认证,DRF权限,DRF节流)
昨日内容回顾 1. 五个葫芦娃和三行代码 APIView(views.View) 1. 封装了Django的request - request.query_params --> 取URL中的参数 ...
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- Ajax及跨域
概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...
- 一个粗心的Bug,JSON格式不规范导致AJAX错误
一.事件回放 今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...
- ABP文档 - Javascript Api - AJAX
本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...
- ajax异步请求
做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...
- 调用AJAX做登陆和注册
先建立一个页面来检测一下我们建立的用户名能不能用,看一下有没有已经存在的用户名吗 可以通过ajax提示一下 $("#uid").blur(function(){ //取用户名 va ...
随机推荐
- Delphi 动态改变Rzsplitter的Orientation(方向)属性
效果图: 原先不知道,弄了半天都改不了RzSplitter.Orientation = orHorizontal / orVertical 然后去查该组件的源代码,原来Orientation不是在Rz ...
- java测试1
发大水 package com.java1234.activiti.variable; import java.util.Date; import java.util.HashMap; import ...
- jquery easy ui 学习 (4) window 打开之后 限制操纵后面元素属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Delphi-Concat 函数
函数名称 Concat 所在单元 System 函数原型 function Concat ( const String1 {,String2 ...} : string ) : string; 函数功 ...
- centos下安装cdh5
http://www.aboutyun.com/thread-9075-1-1.html 基本参考这个 yum clean all yum update 1.保证selinux关闭 /e ...
- 一次完整的HTTP事务是怎样一个过程?(转)
(转自http://www.linux178.com/web/httprequest.html)写的太好了,转一个. 关于HTTP协议可以参考以下: HTTP协议漫谈 http://kb.cnblog ...
- JS简易时钟
HTML <div id="clock"> <span></span>:<span></span>:<span&g ...
- <<开源硬件创客 15个酷应用玩转树莓派>>
本书共分18章,前3章是本书的基础章节,主要介绍了树莓派的一些基本情况和基本操作,来让读者了解树莓派的前世今生,掌握树莓派基本的使用方法.第4~18章主要介绍15个以树莓派为载体的酷炫应用,大家可以按 ...
- POJ3349 Snowflake Snow Snowflakes(哈希)
题目链接. 分析: 哈希竟然能这么用.检查两片雪花是否相同不难,但如果是直接暴力,定会超时.所以要求哈希值相同时再检查. AC代码: #include <iostream> #includ ...
- Qt入门(7)——QApplication类
QApplication类管理图形用户界面应用程序的控制流和主要设置.它包含主事件循环,在其中来自窗口系统和其它资源的所有事件被处理和调度.也用于处理应用程序的初始化和结束,并且提供对话管理.它也处理 ...