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的让textarea自适应高度的插件
Aug 03 Javascript
Document对象内容集合(比较全)
Sep 06 Javascript
jQuery bind事件使用详解
May 05 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
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数据库的PHP程序
2006/10/09 PHP
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
php高级编程-函数-郑阿奇
2011/07/04 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
javascript事件问题
2009/09/05 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
vc6编写python扩展的方法分享
2014/01/17 Python
Python里隐藏的“禅”
2014/06/16 Python
Python正则表达式匹配ip地址实例
2014/10/09 Python
python机器学习之随机森林(七)
2018/03/26 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
毕业生个人求职自荐信
2014/02/26 职场文书
求职个人评价范文
2014/04/09 职场文书
毕业典礼主持词
2015/06/29 职场文书
小学生反邪教心得体会
2016/01/15 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android