AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术)
Ajax是一种技术方案,但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript,而其中最核心的依赖是浏览器提供的XMLHttpRequest对象,是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。
Ajax不属于JS核心语法(ECMA Script),只是浏览器提供的一个普通对象,对象身上有很多属性和方法,利用这些属性和方法,前端可以和后端进行数据交换
异步JavaScript:JavaScript的代码都是至到而下执行的,如果一块代码没有执行完毕,那后面的代码就不会执行。异步就是ajax可以做到不按顺序执行
ajax作用: js与后端进行数据交互的一种技术,通过请求协商好的接口,来获取到想要的数据
优点:传输数据时候会在本页面请求服务器,不用跳转页面,从而减轻服务器压力。做到实时验证,减少用户返工率且优化用户体验
ajax数据交互流程
5个步骤,相当于生活中的打电话:
1、创建一个ajax对象 买了一个电话
2、填写请求地址 输入号码
3、发送请求 拨号
4、等待服务器响应 等待
5、接收数据 通话
XMLHttpRequest对象的兼容性
IE6下没有XMLHttpRequest对象,可以使用new ActiveXObject('Microsoft.XMLHTTP');来替代
GET请求和POST请求的区别
事实上,HTTP请求有八种之多,分别是:OPTIONS、HEAD、GET、POST、PUT、DELETE、TRACE、CONNECT
但目前阶段我们只要了解其中的GET 和 POST方式,最常用的也是这两种方式。
一般来说,不涉及隐私消息的查询用get方式,比如百度搜索
添加、修改、校验等用POST,比如注册用户名,修改密码,登录
get方式
1、通过地址栏信息进行数据传输,传输的大小有限制
2、不安全,用户的所有信息都会暴露出来
3、拼接数据的时候要用encodeURI转一下码,不然有中文就会乱码
4、不用设置请求头
5、数据拼接在open方法里
6、会有浏览器缓存问题
post方式
1、通过send向服务器传输数据,理论上来说是没有长度或体积限制
2、相对来说安全,因为不直接暴露用户信息
3、不用转码,已经通过请求头设置了数据格式,不会有乱码
4、在send()的前面需要设置一个请求头(不设置要出错)
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
5、数据要拼接在send方法里
6、没有浏览器缓存问题
get转码问题:如果用get方式向服务器发送请求,请求中带有中文参数,需要使用encodeURI()方法对参数进行编码操作
post发送请求的时候一定要在发送前设置一下请求头,告诉后台你的数据是放在哪里的:
ajax对象.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
同步与异步:代码执行的一种模式
同步
1、当send()方法调用后会等待服务器返回信息,如果服务器一直没有响应,就会阻塞后面的代码,后面的代码就不会执行
2、后面的代码执行受前面代码的影响,前面的代码没跑通,后面的代码就不会执行
异步
1、当send()方法调用后,就会执行后面的代码,不用等待服务器的响应
2、后面的代码执行不受前面代码的影响
举例:肯德基买汉堡,点单与取汉堡
onreadystatechange与onload事件
jax对象.readyState AJAX运行步骤(第一步捕捉不到)
它的值为4的话说明AJAX已经运行完成
0 初始化 还没有调用open()方法
1 载入 已调用send()方法,正在发送请求
2 载入完成 send()方法完成,已收到全部响应内容
3 解析 正在解析响应内容
4 完成 响应内容解析完成,可以在客户端调用了
ajax对象.status 服务器对请求的反馈(状态码)
200就是成功的,404就是错误的
onreadystatechange
readyState的值发生改变时触发的事件,只要这个值有变化就会触发
onload
所有请求成功完成后触发,此时readystate的值为4
(IE678不支持)
(新的XMLHttpRequest不推荐用onreadystatechange,使用onload)