ajax 网络请求

了解什么是ajax

1. 在不刷新浏览器的发送网络请求 , 并得到服务器响应的数据.

2. (局部刷新)

一. ajax概述

1.1 ajax应用场景

1. 微博 的 热搜 (在固定的时间内进行请求 展示最新热搜的数据)

2. 百度的搜索框

3. 投票 (分享一个 链接 最美大学生 ) 点赞的功能

1.2 GET请求

 // 1. 准备发送网络请求
 var xhr = new XMLHttpRequest();
 // 2. 准备发送网络请求
 // xhr.open(请求方式,请求地址);
xhr.open('get', 'http://localhost/getCode.php');
 // 3. 发送
 xhr.send();
 // 4. 监测服务器是否返回了数据
 xhr.onload = function () {
  // 判断服务器是否返回了数据
   // readyState== 4 则代表服务器成功返回了数据
   if (xhr.readyState == 4) {
     // 服务器已经返回了相关的数据
     console.log(xhr.responseText);
  }
};
// 下面是jquery 封装好的ajax方法
$.ajax({
url:'请求地址',
data:'参数',
dataType:'json',
success:function(res){
回调函数
}

})

1.2 post请求

post是ajax的另一种请求方式和get有一点不一样

post和get请求 的区别

1. 准备发送的时候 请求方式 写的是post url就是单纯的url地址(不能携带参数)

2. post请求 要设置请求头 get不需要：

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

3. post的参数 是在发送的时候才会携带 send() 格式和 get请求的格式一致

var xhr = new XMLHttpRequest();

      xhr.open('post', 'url');
      // 一定要将设置请求头的代码 写到 open的后面
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.send('{"msg":"wzy"}');
      xhr.onload = function () {
        console.log(xhr.responseText);
      };

1.3 json讲解

什么是json

其实就是一种数据格式

1. json是一种数据格式

2. 和js对象非常的像

3. 在json对象中 键,值必须是使用""括起来 不能使用单引号 (数字型和布尔型)

4. 在json对象中 末位的最后的一个键值必须没有,分割

5. 在接送对象中值不能使用变量代替

什么是对象 ：对象是由 {} 构成的 是一个无序的集合 如果想访问其中的数据值

JSON.parse() 将json字符串->json对象

JSON.stringify() 将json对象->json字符串的

// 将js对象转化位json格式的字符串

      console.log(typeof JSON.stringify(xjy));

// 把json格式转为字符串 能不能吧json格式字符串 转为 json对象

      console.log(JSON.parse(JSON.stringify(xjy)));

json总结

1. json是一种数据格式

2. 和js对象非常的像

3. 在json对象中 键,值必须是使用""括起来 不能使用单引号 (数字型和布尔型除外)

4. 在json对象中 末位的最后的一个键值必须没有 , 分割

5. 在json对象中值不能使用变量代替

1.4 ajax状态码

• 什么是ajax状态码

在创建ajax对象,配置ajax对象,发送请求,以及接受服务端响应数据, 这个过程中的每一个步骤都会对应一个数值就叫ajax的状态码 这是浏览器给提供的状态

1.ajax的状态码一共有  5  个

        0 ---ajax对象已经创建并未调用send方法

        1--- ajax的准备工作已经准备好 , 但是并未调用send方法

        2-- ajax已经调用了send方法 (请求已经成功发送)

        3-- 服务器的数据已经返回给客户端 - 但是此时数据并没有完全接受完成 还在解析中(只接受了 部分数据)

        4-- 数据解析完成 数据可以正常使用了

2. 如何捕获到ajax的所有状态

  通过 onreadystatechange 可以捕获到ajax所有 状态

3. 我们在使用onreadystatechange之前使用是onload事件 那么他们有什么区别

1. onreadystatechange 1. 能多次执行 2. 能兼容ie 浏览器 3. 需要判断ajax的状态

2. Onload 1.只有在数据加载完成后才会执行1次 2. 不兼容ie浏览器 3.不需要判断ajax的状态

最后

以上就是怕孤单唇彩为你收集整理的ajax 网络请求的全部内容，希望文章能够帮你解决ajax 网络请求所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。