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 相关文章推荐
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
使用js画图之画切线
Jan 12 Javascript
Angularjs过滤器使用详解
May 25 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 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中使用Oracle数据库(6)
2006/10/09 PHP
用PHP生成html分页列表的代码
2007/03/18 PHP
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
php对数组排序代码分享
2014/02/24 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
利用Python查看目录中的文件示例详解
2017/08/28 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
财务会计专业毕业生自荐信
2013/10/02 职场文书
机械专业技术员求职信
2014/06/14 职场文书
服务标语口号
2014/07/01 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android
python 中的jieba分词库
2021/11/23 Python