Ajax简介这里不过多赘述,课程简介中已经写了许多内容,我们直接从XML开始写起。

XML简介

XML是可扩展标记语言,XML被设计用来传输和存储数据。
它和HTML的区别呢,它们有很多相似的点,都是由标签组成的,不过XML是设计用来传输存储数据的,比如用它保存用户数据、商品数据等等,我们可以用它保存,也可以用它传输数据;而HTML的作用,是用来呈现数据的。
所有HTML用来呈现数据,XML用来存储和传输数据,除此之外,HTML中的标签都是预定义标签,如

等等,都是实现定义好的,我们使用即可,而XML中的标签都是自定义标签,是可以自己设定的,用来表示数据。
以前由于XML的这些特点,Ajax传输数据用的都是XML,不过现在就不一样了,已经被JSON取代了,由于JSON的许多特性,灵活度要远胜XML,有关于JSON的内容可以看我另一篇文档:
提升练习(仅看JSON部分即可)。


Ajax的特点

优点:

  1. 无需刷新页面即可与服务器进行通信。
  2. 允许你根据用户事件来更新部分页面内容

缺点:

  1. 没有浏览历史,不能回退
  2. 存在跨域问题(同源),比如我们是一个a.com的网页向b.com发送ajax请求,这样默认是不可以的
  3. SEO不太友好,比如由于网页是动态刷新的,网页中的某些内容爬虫是爬不到的

HTTP协议

概念:HTTP协议,全程超文本传输协议,协议详细规定了浏览器和万维网服务器之间的互相通信规则,是两者之间通信的约定、规则。
HTTP组要约定了以下两种内容:

  • 请求报文(浏览器发送给服务器的内容):
      • POST(GET) / s?ie=utf-8(url参数) HTTP/1.1(版本)
      • Host: atguigu.com
      • Cookie: name=guigu
      • Content-type: application/json
      • User-Agent: chrome…
      • 格式:名字: 值
    • 空行
    • 体(GET请求,请求体是空的)
      • username=xxxxxx&password=xxxxx
  • 响应报文(服务器返回给浏览器的内容):
      • HTTP/1.1(版本) 200(状态码) OK(响应字符串)
      • Content-type: text/html,charset=utf-8
      • Conetnt-length: 2048
      • Conetnt-encoding: gzip
      • ….
    • 空行
      • HTML源码内容

那么怎么在浏览器中查看这些报文呢?我们打开任意浏览器,点击F12或者右键审查元素,可以看到网页的源代码,选择Network部分,刷新网页,就可以看到浏览器捕获到的数据报文了。

image.png
我们点击任意报文,可以看到Headers、Preview、Response、Cookies、Timing(有些浏览器还有Initiator)
我们现阶段重点关注前三个内容,Headers中可以看到我蓝线部分的四部分内容,我们重点看中间两部分内容。
展开Request Headers部分,就可以看到请求信息了,点击view source就可以看到我们发送的请求头内容
image.png
打开下方Query String Parameters部分,可以看到我们url中的参数,对我们以后调试很方便,可以看到我们的参数有没有发送过去
image.png
最后打开Response Headers内容,点击view source就可以看到所有的响应头信息。
image.png
点击上方Response部分,就可以看到服务器返回给我们的请求体内容
image.png
以上是GET请求的内容,POST请求的内容大致也差不多,这里不做演示。