Ajax 概述
- 网络编程
- AJAX(Asynchronous JavaScript and XML),最早出现在2005年的google suggest
- 它不是像html、JavaScript或css这样的一种‘正式的’技术
- 他是在浏览器端进行网络编程(发送请求、接收响应)的技术方案
- 它使我们可以通过JavaScript直接获取服务端最新的内容而不必重新加载页面(局部更新)
- 让web更接近桌面应用的用户体验
- AJAX就是浏览器提供的一套API,可以通过JavaScript调用,从而实现通过代码控制请求与响应,实现通过JavaScript进行网络编程
- xml:最早在客户端与服务端之间传递数据时所采用的数据格式
已知发送请求的方式
- 地址栏输入地址,回车,刷新
- 特定元素的href或src属性
- 表单提交 这些方案都是我们无法通过或者很难通过代码的方式进行编程操作的
体验AJAX
- 使用jQuery中封装的Ajax,快速体验带来的效果
- 免费接口:https://jsonplaceholder.typicode.com/
原生ajax请求步骤
- 创建XMLHttpRequest类型的对象---相当于打开一个浏览器
- 准备发送,打开与一个网址之间的连接--相当于在地址栏输入网址
- 执行发送动作 ---相当于点击回车或者超链接
- 执行xhr状态变化事件处理函数
XMLHttpRequest类型的对象
AJAX API中核心提供的是一个XMLHttpRequest类型,所以的AJAX操作都需要使用到这个类型 var xhr = new XMLHttpRequest();
IE6兼容 xhr = new ActiveXObject('Microsoft.XMLHTTP');
兼容写法: if(window.XMLHttpRequest)
open()方法开启请求 准备发送,打开与一个网址之间的连接
- 本质上XMLHttpRequest就是JavaScript在web平台中发送http请求的手段,所以我们发送出去的请求仍然是http请求,同样符合http约定的格式
- 语法:
xhr.open(method,url)
- method:要使用的http方法,比如GET、POST、PUT、DELETE等
- url:要向其发送请求的URL地址,字符串格式
send()方法发送请求 执行发送动作
- 用于发送http请求
- 语法:
xhr.send(body)
- body:在xhr请求中要发送的数据体,根据请求头中的类型进行传参
- 如果是GET方法:无需设置数据体,可以传null或者不传参
setRequestHeader()方法设置请求头,一般get方法不需要设置,post方法必须设置
- 此方法必须在o