Ajax入门(一)从0开始到一次成功的GET请求
什么是服务器
网页浏览过程分析
一个完整的HTTP请求过程,通常有下面7个步骤
- 建立TCP连接
- Web浏览器向Web服务器发送请求命令
- Web浏览器发送请求头信息
- Web服务器- 应答
- Web服务器- 发送应答头信息
- Web服务器- 向浏览器发送数据
Web服务器- 关闭TCP连接
如何配置自己的服务器程序(AMP)
Ajax必须在服务器环境下才能正常使用
- 我使用的WampServer程序.(支持中文)官网连接.可能速度不行,不过科学上网,大家应该都会.
- 网上的使用教程:如何安装使用
- XAMPP–我试了一下,还是wamp简单,大家有兴趣就自己去测试了
- 推荐使用firefox浏览器进行AJAX的调试。
Ajax原理
什么是Ajax?
- 无刷新数据读取
- 用户注册/在线聊天室
- 理解同步和异步(基本都用异步请求).
同步: 客户端发起请求–等待–>服务器端处理—等待–>响应–>页面载入 (请求错误时全部重新载入).
异步: 客户端发起请求—>服务器端处理—>响应—>页面载入(填写时,即时更新,部分返回).
HTTP请求
- 一个HTTP请求一般由四部分组成
- HTTP请求的方法或动作如是
GET
还是POST
请求 - 正在请求的URL,总得知道请求的地址是什么吧?
- 请求头,包含一些客户端环境信息,身份验证信息等
- 请求体,也就是请求正文,请求正文中可以包含客户端提交的查询字符串信息,表单信息等等.
- HTTP请求的方法或动作如是
HTTP响应
- 一个HTTP响应一般由三部分组成:
- 一个数字和文字组成的状态码,用来显示请求是成功还是失败
- 响应头,响应头和请求头一样包含许多有用的信息,例如服务器类型,日期时间,内容类型和长度等.
- 响应体,也就是响应正文.
HTTP请求方式
GET | POST |
---|---|
用于信息获取/查询(如:浏览帖子) | 用于修改服务器上的资源(如:用户注册) |
安全性低(使用url 传递参数所有人可见) |
安全性一般(至少不可见) |
容量低(2000个字符) | 容量几乎无限 |
常见的HTTP状态码
状态码 | 描述 | 原因短语 |
---|---|---|
200 | 请求成功.一般用于GET和POST方法 | OK |
301 | 资源移动.所请求资源移动到新的URL,浏览器自动跳转到新的URL | Moved Permanently |
304 | 未修改.所请求资源未修改读取缓存数据 | Not Modified |
400 | 请求语法错误,服务器无法理解 | Bad Request |
404 | 未找到资源,可以设置个性”404页面” | Not Found |
500 | 服务器内部错误 | internal Server Error |
编写Ajax
类比打电话理解Ajax编写步骤
打电话 | ajax请求 |
---|---|
1.打电话 | 1.创建Ajax对象 |
2.拨号 | 2.连接服务器 |
3.建立连接 | 3.发送请求 |
4.听 | 4.接受返回 |
1.创建Ajax对象
- IE6:
ActiveXObject("Microsoft.XMLHTTP")
;//IE6已死,可以不考虑了 XMLHttpRequest()
;
例:var request = new XMLHttpRequest();
2.连接服务器
open(method,url,async);
- open(发送请求方法”GET/POST” ,(请求地址”文件名”) ,是否异步传输)
例: request.open("GET","get.json",true);
3.发送请求
send(string)
- 在使用
GET
方式请求时无需填写参数 - 在使用
POST
方式时参数代表着向服务器发送的数据
- 在使用
1 |
//完整的GET请求 |
4.接收返回-请求状态监控
- XMLHttpRequset取得响应
属性 | 值 |
---|---|
responseText |
获得字符串形式的响应数据 |
responseXML |
获得XML形式的响应数据 |
status 和statusText |
以数字和文本方式返回HTTP状态码 |
getAllResponseHeader() |
获取所有的响应报头 |
getResponseheader() |
查询响应中的某个字段的值 |
onreadystatechange
事件通过监听
onreadystatechange
事件,来判断请求的状态.readyState
属性:响应返回所处状态
状态码 | 状态 | 所处位置 |
---|---|---|
0 | (未初始化) | 还没有调用open() 方法 |
1 | (载入) | 已调用send() 方法,正在发送请求 |
2 | (载入完成) | send() 方法完成,已经收到全部响应 内容 |
3 | (解析) | 正在解析响应内容 |
4 | (完成) | 响应内容解析完成,可以在客户端调用了 |
例:
1 |
//基本完整的一个Ajax请求 |
使用函数简单的封装一个get请求
1 |
/** |
使用Ajax
基础:请求并显示静态TXT文件
- 字符集编码:不一致时会出现乱码
- 缓存,阻止缓存,(使用时间对象添加)
动态数据:请求JS(或JSON)文件
注:并不推荐使用
eval
,并不推荐使用eval
,并不推荐使用eval
。因为eval解析数据时会有一系列问题出现。这里是因为只是学习就随意点了。
在需要解析请求数据时,推荐使用JSON的方法JSON.parse()
可以将一个 JSON 字符串解析成为一个 JavaScript 值。参考MDN-JSON
eval
的使用
例:
1 |
var str = "54-8*6+4"; |
一次成功的get请求
1 |
//已经引入get函数 |
DOM
创建元素- 局部刷新:请求并显示部分网页文件,使用
for
循环. - 这里是属于DOM操作的范围,在这里就不过多讲述了。
- 局部刷新:请求并显示部分网页文件,使用
From:http://guowenfh.github.io/2015/12/18/Ajax-elementary-course-1/
Ajax入门(一)从0开始到一次成功的GET请求的更多相关文章
- Ajax入门(二)Ajax函数封装
如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...
- 掌握 Ajax,第 1 部分: Ajax 入门简介
转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...
- AJAX入门---DOM操作HTML
AJAX入门---DOM操作HTML 一边学习AJAX一边坐着总结加深印象.上次写的是怎样简单的使用XMLHttpRequest对象.今天写的是DOM(文档对象模型(Document Object M ...
- ajax入门之建立XHR对象 (1)
ajax入门之建立XHR对象 今天帮朋友写了一个简单的ajax的demo,发现了一些东西,决定写一篇文章记录一下,避免以后挖坑. 创建XMLHttpRequest 通常 function create ...
- ASP.NET AJAX入门系列(4):使用UpdatePanel控件(一)
UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加 ...
- ASP.NET AJAX入门系列(1):概述
经常关注我的Blog的朋友可能注意到了,在我Blog的左边系列文章中,已经移除了对Atlas学习手记系列文章的推荐,因为随着ASP.NET AJAX 1.0 Beta版的发布,它们已经不再适用,为了不 ...
- ASP.NET AJAX入门系列
ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...
- 系列文章--ASP.NET之AJAX入门教程
ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...
- JavaEE的ajax入门
JavaEE的ajax入门 代码下载 链接:https://pan.baidu.com/s/1pb_sdSmV9Ncs6UIz3q2ztg 提取码:fgx6 复制这段内容后打开百度网盘手机App,操作 ...
随机推荐
- python中的字符串的种种函数
1.连接list:为了将任意包含字符串的 list 连接成单个字符串,可以使用字符串对象的 join 方法. join 只能用于元素是字符串的 list:它不进行任何的强制类型转换.连接一个存在一个或 ...
- Python基本语法(一)
注释及注意 #代表注释:冒号:结尾时,接下来的代码会自动缩进,一般为4个空格.Python程序是大小写敏感的. 数据类型和变量 在Python中能够直接处理的数据类型有以下几种: 整数 浮点数 字符串 ...
- 分布式_理论_02_Base 理论
一.前言 五.参考资料 1.分布式理论(二)——Base 理论 2.分布式理论(二) - BASE理论
- Linux-监控与安全运维之cacti
一:cacti简介 Cacti 在英文中的意思是仙人掌的意思,Cacti是一套基于PHP,MySQL,SNMP及RRDTool开发的网络流量监测图形分析工具.它通过snmpget来获取数据,使用 RR ...
- Redis底层探秘(五):Redis对象
前面几篇文章,我们一起学习了redis用到的所有主要数据结构,比如简单动态字符串(sds).双端链表.字典.压缩列表.整数集合等等. redis并没有直接使用这些数据结构来实现键值对数据库,而是基于这 ...
- BZOJ2784: [JLOI2012]时间流逝
BZOJ2784: [JLOI2012]时间流逝 https://lydsy.com/JudgeOnline/problem.php?id=2784 分析: 挺有意思的一道题. 注意到状态数是\(P( ...
- h5废弃的标签和属性及新增的标签和属性
一.废弃的标签和属性 1.表现性元素 a) basefont b) big c) center d) font e) strike f) tt 2.框架类元素 a) frame b) frameset ...
- Unity3D的SystemInfo类,用于获取运行设备硬件信息(CPU、显卡、类型等)
SystemInfo类中的静态变量: 中文显示: Rendering.CopyTextureSupport copyTextureSupport:(只读)支持多种复制纹理功能的情况. string ...
- XML数据库的尝试
首先祝大家新年快乐.身体健康,平安就是福气. 对于一般的个人迷你项目,数据量不大的时候,完全没有必要使用数据库,管理数据使用XML就可以了. 自己尝试写了一个XML数据库,插入1w条小记录,大概3M大 ...
- ubuntu tftp server config
1.安装tftp-server sudo apt-get install tftpd-hpa sudo apt-get install tftp-hpa(如果不需要客户端可以不安装) tftp-hpa ...