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 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
Vue父子传递实例讲解
Feb 14 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
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
为超链接加上disabled后的故事
2010/12/10 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python易忽视知识点小结
2015/05/25 Python
python并发编程之线程实例解析
2017/12/27 Python
python打印异常信息的两种实现方式
2019/12/24 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
费用会计岗位职责
2014/01/01 职场文书
公司司机岗位职责
2014/02/07 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
后天观后感
2015/06/08 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python
goland 恢复已更改文件的操作
2021/04/28 Golang
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers