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 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
eval与window.eval的差别分析
Mar 17 Javascript
js实现的折叠导航示例
Nov 29 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 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动态生成JavaScript代码
2009/03/09 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
Js四则运算函数代码
2012/07/21 Javascript
jquery 插件学习(二)
2012/08/06 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
python实现五子棋小程序
2019/06/18 Python
python画双y轴图像的示例代码
2019/07/07 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
python基于opencv检测程序运行效率
2019/12/28 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
保安岗位职责
2014/02/21 职场文书
软件部经理岗位职责范本
2014/02/25 职场文书
个人委托书怎么写
2014/04/04 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
原告离婚代理词
2015/05/23 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang