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 相关文章推荐
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
Javascript如何实现扩充基本类型
Aug 26 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 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
记录mysql性能查询过程的使用方法
2013/05/02 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
C,C++的几个面试题小集
2013/07/13 面试题
JAVA中运算符的分类及举例
2015/09/12 面试题
本科生求职简历的自我评价
2013/10/21 职场文书
主治医师岗位职责
2013/12/10 职场文书
《狐假虎威》教学反思
2014/02/07 职场文书
风险评估实施方案
2014/03/09 职场文书
员工工作表现自我评价
2015/03/06 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
孙振耀退休感言
2015/08/01 职场文书
感恩教育主题班会
2015/08/12 职场文书