Ajax基础知识详解


Posted in Javascript onFebruary 17, 2017

Ajax主要的功能是实现了浏览器端 异步 访问服务器:通过浏览器的XMLHttpRequest对象发出小部分数据,与服务端进行交互,服务端返回小部分数据,然后更新客户端的部分页面。

1.先实例化XMLHttpRequest对象

var request;
if (window.XMLHttpRequest){
 request=new XMLHttpRequest();
}
else{
 request=new ActiveXObject("Microsoft.XMLHTTP");
 //兼容ie5 6
}

2.XMLHttpRequest的方法将请求发送给服务器

request.open("POST",get.php,true);//请求
//设置http的头信息,告诉服务器我们要以send键值对方式发送一个表单,
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST必须设置Content-Type的值在open与send之间
request.send("name=王二狗&sex=男");//用send方法提交给服务端

3.获取响应的方法

responseText 获得字符串形式的响应数据
responseXML 获得XML形式的响应数据
status和statusText 以数字和文本形式返回HTTP状态码
getAllResponseHeader() 获取所有的响应报头
getResponseHeader() 查询响应中的某个字段的值

4.监听readyState属性的变化很重要

    为0 请求未初始化,open还没有被调用

    为1 服务器连接已建立,open已经调用了

    为2 请求已被接收,接收到头的信息了

    为3 请求处理中,接收到响应体了

    为4 请求已完成,且响应就绪,响应完成了

//readyState变化时触发
//通过onreadystatechange事件判断readyState属性的变化
request.onreadystatechange=function(){
 if(request.readyState===4&&request.status===200){
 //做一些事情 比如获取响应数据request.responseText
 }
}

5.完整XHR

var request=new XMLHttpRequest();//1.创建XHR对象
request.open("GET","get.php?number=" +表单里需要提交的数据,true);//2.调用open方法
//这里如果是post请求。send的就是一个包含数据的对象
request.send();//发送一些数据
request.onreadystatechange=function(){ //3.进行监听判断服务器是否正确响应
 if(request.readyState===4&&request.status===200){
 //4.做一些事情 比如获取服务器响应内容request.responseText
 }
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
JavaScript中闭包的写法和作用详解
Jun 29 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
原生JS实现轮播图效果
Oct 12 Javascript
Angular Material Icon使用详解
Nov 07 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
vue 解决provide和inject响应的问题
Nov 12 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 #Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 #Javascript
原生js实现日期计算器功能
Feb 17 #Javascript
Vue自定义指令拖拽功能示例
Feb 17 #Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 #Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 #Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 #Javascript
You might like
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
学习php分页代码实例
2013/10/24 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
javascript getElementsByName()的用法说明
2009/07/31 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
Python操作CouchDB数据库简单示例
2015/03/10 Python
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
Python中的__slots__示例详解
2017/07/06 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
pytorch之添加BN的实现
2020/01/06 Python
Django分组聚合查询实例分享
2020/04/29 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
GWebs公司笔试题
2012/05/04 面试题
中学生差生评语
2014/01/30 职场文书
青年文明号复核材料
2014/02/11 职场文书
给领导的检讨书
2014/02/16 职场文书
入职担保书怎么写
2014/05/12 职场文书