ajax完整封装使用 |
您所在的位置：网站首页 › 封装http › ajax完整封装使用 |
|
ajax笔记
一. 简介 ajax是什么
ajax 异步的js和xml，通过ajax可以向浏览器发送异步请求，无刷新获取数据 xml是什么 xml可扩展标记语言，被设计用来传输和存储数据 xml和html类似，不同的是html中都是预定义标签，而xml中没有预定义标签， 全都是自定义标签，用来表示一些数据 小飞 20 男 现在已经被json取代了 用json表示： {"name":"小飞"，“age”:20,"gender":"男"} 1.1 ajax的特点：优点： 可以无需刷新页面与服务器进行通讯 允许你根据用户事件来更新部分页面内容缺点 没有浏览历史 存在跨域问题 seo不友好http协议：超文本传输协议，协议详细规定了浏览器和万维网服务器之间互相通信的规则 1.2GET请求和POST请求相同点： 都是将数据提交到远程服务器 不同点： 提交数据存储的位置不同 get请求会把数据放到url后面，post请求会把数据放到请求头中 提交数据大小限制不同 GET请求对数据有大小限制 POST请求对数据没有大小限制 GET/POST应用场景 GET请求用于提交非敏感数据和小数据 POST请求用于提交敏感数据和大数据 二. ajax的五个步骤 1 创建一个异步对象 2 设置请求方式和请求地址 3 发送请求 4 监听状态变化 5 处理返回的结果 复制代码实例 var btn = document.querySelector("button"); btn.addEventListener("click",function(){ //1 创建一个异步对象 var xmlhttp = new XMLHttpRequest(); //2 设置请求方式和请求地址 /*method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）*/ xmlhttp.open("GET","ajax-get.php",true); //3 发送请求 xmlhttp.send(); //4 监听状态变化 //只要异步对象发生了变化就会调用这个回调函数 使用onreadystatechange xmlhttp.addEventListener("readystatechange",function (){ /*readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪*/ if(xmlhttp.readyState ===4){ //判断 当http状态码在200到300之间 或者当http状态码等于304时 请求成功 if(xmlhttp.status>=200&&xmlhttp.status= 200 && xhr.status |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |