Ajax(异步的javascript和XML),若干年以前它的出现使得javascript重新得到程序员们的重视,它终结了用户“单击,等待”的交互过程,通过异步模式,让用户在单击(形如表单提交,添加购物车等需要与后台交互的动作)之后仍能进行其他操作而不是要等服务器响应完后才能进行后续操作。
<br>
### Ajax的核心—XMLHttpRequest
* * * * *
可以说Ajax的精华部分就是它的XMLHttpRequest对象,为了方便起见简称XHR对象。
既然是对象,那么它就有原生的属性和方法
1. readyState:请求/响应过程的当前活动阶段
0:未初始化,尚未调用open()方法
1:启动,已经调用open(),但尚未调用send()
2:发送,已经调用send,但尚未接收到响应
3:接受,已经接受部分响应数据
4:完成,已经接受全部数据,而且已经可以在客户端使用
2. status:响应的Http状态,例如200,404,304等
3. open方法:接收三个参数,分别是:请求方式,请求的url,同步还是异步(false or true)
4. send方法:接收一个参数,如果用get方式的话参数可以不写或者是null,如果用post方式的话参数是请求的数据。
5. responseText:服务器返回的数据
6. onreadystatechange事件:每当readystate的值发生改变都会触发一次该事件。
打开控制台可以看到Http头部信息
![](https://box.kancloud.cn/2016-04-08_5707ceb242222.JPG)
![](https://box.kancloud.cn/2016-04-08_5707ceb2773cc.JPG)
一个简单的Ajax实例:
~~~
document.getElementById('ajax').addEventListener('click',function()
{
var xml=new XMLHttpRequest();
xml.onreadystatechange=function()
{
if(xml.readyState==4 && xml.status==200)
{
console.log(xml.responseText);
}
};
xml.open("get","user.json");
xml.send();})
~~~
<br>
### 细说POST和GET的区别
* * * * *
GET请求
1. GET方式直接将请求的数据添加在URL的末尾
~~~
xml.open('GET',"ajax.php?number="+document.getElementById('keybord').value);
xml.send();
~~~
2.GET请求发送数据量小
3.请求数据,用于查询信息,也就是取数据
4.GET请求发送后被缓存
<br>
POST请求
1. POST方式模仿form的表单提交,所以要设置Content-Type头部信息为application/x-222-form-urlencoded,
`xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");`
~~~
xml.open('POST','ajax.php');
var data="name="+document.getElementById("stuffname").value+
"&number="+document.getElementById("stuffnumber").value+
"&sex="+document.getElementById("stuffsex").value+
"&job="+document.getElementById("stuffjob").value;
xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xml.send(data);
~~~
2. POST请求发送数据量大
3. 用于向服务器发送被保存的数据,也就是存数据
4. POST没有缓存
注意:如果post的是表单,则需要先对表单对象进行序列化,可以使用jQuery中的serialize()方法,也可以用原生的js封装。
- html/css
- 不一样的css3之Transform
- 不一样的css3之Transition
- 不一样的css3之Animation
- Less初学
- Sass初学
- 水平垂直居中那些事
- css优先级
- css基础教学
- javascript
- 浅谈javascript事件处理程序
- cookie,localStorage,sessionStorage的区别
- Ajax
- 说说JSON
- 数组常用的方法
- 字符串常用的方法
- 闭包之我的理解
- 常用DOM操作
- 扒一扒所谓的面向对象
- JS Blob对象
- ES6学习笔记(一)
- ES6学习笔记(二)
- 用ES6书写React
- React+Redux实战总结
- 基于Express搭建开发环境
- 其他
- github初学
- 轻松配置Webpack
- asp.net学习笔记
- ado.net
- 如何使用ajax进行前后端交互
- 银行大厅自助服务系统需求分析
- 西电银行开发手册
- 接口
- ajax