03 原生Ajax写法

目录

 一、原生Ajax写法

1.原生Ajax-GET写法

2.原生Ajax-POST写法

 二、GET/POST的区别

---

下图为本文的核心

 

 

 一、原生Ajax写法

1.原生Ajax-GET写法

1.创建xhr对象

  const xhr = new XMLHttpRequest()

2.设置url地址与请求方式

xhr.open('GET', 'http://ajax-api.itheima.net/api/area?pname=湖北省&cname=武汉市')

3.发送

xhr.send()

 4.监听load

xhr.addEventListener('load', () => {
  console.log(xhr.response);//字符串
  console.log(JSON.parse(xhr.response));//转对象
  })

控制台查看结果：

---

注意点：

GET方法，它的参数传递可以直接写在url后面用？拼接即可，参数之间用&拼接

2.原生Ajax-POST写法

1.创建对象

const xhr = new XMLHttpRequest()

 2.设置url地址与请求方式

xhr.open('POST', 'http://ajax-api.itheima.net/api/login')

3.设置请求头(post才需要，get省略)

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

4.发送请求

xhr.send('username=admin&password=123456')

5.监听load

xhr.addEventListener('load', () => {
   console.log(xhr.responseText);
   })

控制台查看结果：

---

注意点：

POST需要设置请求头，传递参数在请求体中

 二、GET/POST的区别

①位置

GET是写在地址栏中，而POST是写在请求体当中

②大小

GET受到地址栏长度限制，它的书写长度没POST长。POST则没有限制

③速度

GET的响应速度比POST快

④安全

GET写在地址栏信息都看得到，而POST是写在请求体当中，相对来说更安全一点

⑤语义

GET是查询的语意，POST则是添加的语义。