Ajax入门(一)从0开始到一次成功的GET请求

  • A+
所属分类:JavaScript

 

什么是服务器

网页浏览过程分析

一个完整的HTTP请求过程,通常有下面7个步骤

  1. 建立TCP连接
  2. Web浏览器想Web服务器发送请求命令
  3. Web浏览器发送请求头信息
  4. Web服务器- 应答
  5. Web服务器- 发送应答头信息
  6. Web服务器- 向浏览器发送数据
  7. Web服务器- 关闭TCP连接

如何配置自己的服务器程序(AMP)

Ajax必须在服务器环境下才能正常使用

  • 我使用的WampServer程序.(支持中文)官网连接.可能速度不行,不过科学上网,大家应该都会.
  • 网上的使用教程:如何安装使用
  • XAMPP--我试了一下,还是wamp简单,大家有兴趣就自己去测试了

Ajax原理

什么是Ajax?

无刷新数据读取

  • 用户注册/在线聊天室
  • 理解同步和异步(基本都用异步请求).

同步: 客户端发起请求--等待-->服务器端处理---等待-->响应-->页面载入 (请求错误时全部重新载入).

异步: 客户端发起请求--->服务器端处理--->响应--->页面载入(填写时,即时更新,部分返回).

HTTP请求

一个HTTP请求一般由四部分组成

  1. HTTP请求的方法或动作如是GET还是POST请求
  2. 正在请求的URL,总得知道请求的地址是什么吧?
  3. 请求头,包含一些客户端环境信息,身份验证信息等
  4. 请求体,也就是请求正文,请求正文中可以包含客户端提交的查询字符串信息,表单信息等等.Ajax入门(一)从0开始到一次成功的GET请求

HTTP响应

一个HTTP响应一般由三部分组成:

  1. 一个数字和文字组成的状态码,用来显示请求是成功还是失败
  2. 响应头,响应头和请求头一样包含许多有用的信息,例如服务器类型,日期时间,内容类型和长度等.
  3. 响应体,也就是响应正文.Ajax入门(一)从0开始到一次成功的GET请求

HTTP请求方式

GETPOST
用于信息获取/查询(如:浏览帖子)用于修改服务器上的资源(如:用户注册)
安全性低(使用url传递参数所有人可见)安全性一般(至少不可见)
容量低(2000个字符)容量几乎无限

常见的HTTP状态码

状态码描述原因短语
200请求成功.一般用于GET和POST方法OK
301资源移动.所请求资源移动到新的URL,浏览器自动跳转到新的URLMoved 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方式时参数代表着向服务器发送的数据

4.接收返回-请求状态监控

XMLHttpRequset取得响应

属性
responseText获得字符串形式的响应数据
responseXML获得XML形式的响应数据
statusstatusText以数字和文本方式返回HTTP状态码
getAllResponseHeader()获取所有的响应报头
getResponseheader()查询响应中的某个字段的值

onreadystatechange事件

通过监听onreadystatechange事件,来判断请求的状态.

readyState属性:响应返回所处状态

状态码状态所处位置
0(未初始化)还没有调用open()方法
1(载入)已调用send()方法,正在发送请求
2(载入完成)send()方法完成,已经收到全部响应 内容
3(解析)正在解析响应内容
4(完成)响应内容解析完成,可以在客户端调用了

例:

使用函数简单的封装一个get请求

使用Ajax

基础:请求并显示静态TXT文件

  • 字符集编码:不一致时会出现乱码
  • 缓存,阻止缓存,(使用时间对象添加)

动态数据:请求JS(或JSON)文件

注:并不推荐使用eval,并不推荐使用eval,并不推荐使用eval。 因为eval解析数据时会有一系列问题出现。这里是因为只是学习就随意点了。
在需要解析请求数据时,推荐使用JSON的方法JSON.parse()可以将一个 JSON 字符串解析成为一个 JavaScript 值。参考MDN-JSON

eval的使用

例:

一次成功的get请求

DOM创建元素

  • 局部刷新:请求并显示部分网页文件,使用for循环.
  • 这里是属于DOM操作的范围,在这里就不过多讲述了。
weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: