使用xhr发起GET和POST请求的步骤？以及GET和POST在数据传输上的区别？

是瞻
167 阅读4分钟

使用xhr发起GET和POST请求的步骤？以及GET和POST在数据传输上的区别？

了解什么是XMLHttpRequest？

XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。

xhr对象的readyState属性

XMLHttpRequest 对象的 readyState 属性，用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求必然处于以下状态中的一个： add1730570407b9837f4b499a94208e.png

使用 xhr 对象发起 GET 请求

1]创建 xhr 对象
2]调用 xhr.open() 函数
3]调用 xhr.send() 函数
4]监听 xhr.onreadystatechange 事件

示例：

//1]创建XHR对象
var xhr = new XMLHttpRequest()

//2]调用open函数
xhr.open('GET', 'http://www.zhanzhan/file/666.html')

//3]调用send函数  发起请求
xhr.send()

//4]监听onreadystatechange 事件   //监听响应回来的数据
xhr.onreadystatechange = function () {
  // 判断
  if (xhr.readyState === 4 && xhr.status == 200) {
    // 获取服务器响应的数据
    console.log(xhr.responseText);
  }
}

使用 xhr 对象发起带参数的 GET 请求时，只需在调用 xhr.open 期间，为 URL 地址指定参数即可

//1]创建XHR对象
var xhr = new XMLHttpRequest()
//2]调用open函数

//带一个参数直接在后面以问号拼接就可以了
// xhr.open('GET', 'http://www.zhanzhan/file/666.html?id=1')  

//带多个参数得url地址在地址后面问候拼接&分隔每个参数
xhr.open('GET', 'http://www.zhanzhan/file/666.html?id=1&name=瞻')

//3]调用send函数  发起请求
xhr.send()

//4]监听onreadystatechange 事件   //监听响应回来的数据
xhr.onreadystatechange = function () {
  // 判断
  if (xhr.readyState === 4 && xhr.status == 200) {
    // 获取服务器响应的数据
    console.log(xhr.responseText);
  }
}

使用 xhr 对象发起 POST 请求

1]创建 xhr 对象
2]调用 xhr.open() 函数
3]设置 Content - Type 属性（固定写法）
4]调用 xhr.send() 函数，同时指定要发送的数据
5]监听 xhr.onreadystatechange 事件


// 1]创建xhr对象
var xhr = new XMLHttpRequest()

// 2]调用open()函数
xhr.open('POST', 'http://www.zhanzhan/file/666.html')


// 3]设置centent-Type属性
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

//4]调用send()同时将数据以查询字符串的形式，提交给服务器
xhr.send('username=zhan&age=18&interest=跑步')

//5]监听onreadystatechange事件
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}

url的地址的概念和组成

URL（全称是 UniformResourceLocator） 中文叫 统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源.
.

URL的组成： 三个部分
客户端与服务器之间的 通讯协议
存有该资源的 服务求名称
资源在服务器上 具体的存放位置

注意：url地址是乱写的，仅供理解
// www.zhanzhan/file/666.ht…'
//(通讯协议) (服务器名称) (资源在服务器上的位置)

GET和POST在数据传输上的区别

  1. get请求是拼接url, post请求传的是请求体。
  2. 请求缓存：get请求会被缓存，而post请求不会, get是url的请求, 没有请求体, 因此缓存不了。
  3. get可以保留浏览器历史记录, post不可以，因为get是url请求的。
  4. 安全性：相对于数据被他人截取方面，post比get安全，因为post是请求体，不会在url上被劫持。
  5. 用处：get常用于取回数据，post用于提交数据.在http协议本身是不限制字符串长度，是浏览器限制了get的url里面的长度。
  6. Post传输的数据量大，可以达到2M，而Get方法由于受到URL长度的限制, 只能传递大约1024字节。

总结：

使用 xhr 对象发起 GET 请求
1]创建 xhr 对象
2]调用 xhr.open() 函数
3]调用 xhr.send() 函数
4]监听 xhr.onreadystatechange 事件
使用 xhr 对象发起 POST 请求
1]创建 xhr 对象
2]调用 xhr.open() 函数
3]设置 Content - Type 属性（固定写法）
4]调用 xhr.send() 函数，同时指定要发送的数据
5]监听 xhr.onreadystatechange 事件

GET和POST在数据传输上的区别

  1. get请求是拼接url, post请求传的是请求体。
  2. 请求缓存：get请求会被缓存，而post请求不会, get是url的请求, 没有请求体, 因此缓存不了。
  3. get可以保留浏览器历史记录, post不可以，因为get是url请求的。
  4. 安全性：相对于数据被他人截取方面，post比get安全，因为post是请求体，不会在url上被劫持。
  5. 用处：get常用于取回数据，post用于提交数据.在http协议本身是不限制字符串长度，是浏览器限制了get的url里面的长度。
  6. Post传输的数据量大，可以达到2M，而Get方法由于受到URL长度的限制, 只能传递大约1024字节。
avatar
文章
阅读
粉丝