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 相关文章推荐
判断是否输入完毕再激活提交按钮
Jun 26 Javascript
javascript之对系统的toFixed()方法的修正
May 08 Javascript
javascript 设置文本框中焦点的位置
Nov 20 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
JavaScript控制台的更多功能
Apr 28 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+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
go和python调用其它程序并得到程序输出
2014/02/10 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
UNIX文件类型
2013/08/29 面试题
建筑班组长岗位职责
2014/01/02 职场文书
高中化学教学反思
2014/01/13 职场文书
婚庆答谢词
2015/01/04 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
浅析JavaScript中的变量提升
2022/06/01 Javascript