使用原生JS实现简单的ajax
Ajax是一种使用javascript内置对象向服务器发送请求/接收响应的技术。它可以再页面已经完全显示出来之后再和服务器进行少量的数据交互,所以可以实现局部内容的刷新。
ajax的实现,主要是靠javascript中的内置对象XMLHttpRequest。它可以向服务器发送请求并接收服务器的响应。
下面给给出两个简单的例子:
Get方式发送请求:
//浏览器端 var xhr = new XMLHttpRequest;xhr.open('get', './bb.php?id=4');xhr.send();xhr.onreadystatechange = function() {if(xhr.readyState == 4 && xhr.status == 200) //响应完成并且响应码为200 alert(xhr.responseText);}//服务器端//example.php<?phpecho '欢迎' . $_GET['id'];
POST方式发送请求:
//前端 var xhr = new XMLHttpRequest; xhr.open('post', './example.php'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('id=4&num=5'); xhr.onreadystatechange = function() {if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status ==304)) //响应完成并且响应码为200或304 alert(xhr.responseText); }//后端 //example.php <?php echo '欢迎'. $_POST['id']; echo '欢迎'. $_POST['num'];
最后说一个关于AJAX的兼容问题,在低版本的IE下,是不存在XMLHttpRequest这个内置对象的,我们使用另一个对象ActiveXObject(‘Microsoft.XMLHTTP’)替代。兼容写法如下:
var request;
if(XMLHttpRequest) {request = new XMLHttpRequest;
}else {request = new ActiveXObject(“Microssoft.XMLHTTP”);
}
转载于:https://www.cnblogs.com/cryRoom/p/8362305.html
使用原生JS实现简单的ajax相关推荐
- 深圳java培训:使用原生JS重构简单的音乐播放器
深圳java培训:使用原生JS重构简单的音乐播放器 上次,我们使用Jquery开发了一款简单的音乐播放器(如下图), 后来学生希望能够用原生的JS重构一次, 那么,下面就来看看如何使用原生的JS重构吧 ...
- css画钟表_利用css+原生js制作简单的钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- 原生JS实现简单放大镜效果
[前言] 本文介绍下原生JS实现简单图片放大镜效果 [主体] 时间问题,直接上源码 <!DOCTYPE html> <html> <head><meta ch ...
- jq ajax请求php原声,原生JS与jQuery对AJAX的实现
原生JS与jQuery对AJAX的实现 一.定义 W3C里这么解释AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). ...
- ajax异步处理代码实现,原生JS代码实现一个Ajax异步请求
异步加载的方式 (1) defer,只支持IE (2) async: (3) 创建script,插入到DOM中,加载完毕后callBack 实现ajax之前必须要创建一个 XMLHttpRequest ...
- 原生js实现简单JSONP
JSONP是一种非常常见的实现跨域请求的方法.其基本思想是利用浏览器中可以跨域请求外链的JS文件,利用这一特性实现数据传输. 用原生JS实现JSONP非常简单,无非几点: 1)定义一个函数,用于处理接 ...
- html原生js实现图片轮播,原生js实现简单轮播图
本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下 一.写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器,取代body,这样方便我们做一些初始化 css: ...
- html5实现下拉刷新页面,原生js实现简单的下拉刷新功能
前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...
- html 放大镜 js,原生js实现简单的放大镜效果
前言: 相信很多同学在浏览购物网站的时候都会用到过放大镜的功能,这个功能在日常的网站也会经常用到.接下来我们开始实现一下它吧: (1)首先了解一下放大镜效果的html架构:如下图,它由两部分组成. h ...
最新文章
- 利用Javadoc工具生成api文档
- java日历表打印_Java打印日历表
- 阿里云MySQL远程登录异常
- 2058. 找出临界点之间的最小和最大距离
- BDD敏捷开发入门与实战
- 详解Angular开发中的登陆与身份验证
- D7000、60D、K5、E5的详细对比评价(转)_我是亲民_新浪博客
- 简体中文和繁体中文的转换
- 360抢票王验证码自动识别真的那么牛吗?
- win怎么更换计算机密码错误,win10系统更改开机密码提示“Windows不能更改密码”的解决方法...
- 十分感谢--致谢好友的
- Python-在线网页导出为图片或pdf
- 关于SetCapture和GetCapture
- 明朝历代皇帝 庙号、谥号、姓名、生卒年、在位时间、年号
- 平淡生活:戴戒指的学问
- IDEA中展开包结构的方法
- 会计信息系统问答题计算机网络,2020年4月自考《会计信息系统》复习题及答案(7)...
- LaTeX 中处理参考文献的三种方法总结
- Abaqus 利用FindAt函数根据坐标查找点,线,面
- C语言~宏操作大全(宏定义、内置宏、__FILE__、__LINE__、##用法)
热门文章
- KernelBuildpackageHowto
- Linux中history历史命令使用方法详解
- 《Spark大数据分析实战》——1.4节弹性分布式数据集
- 巧用DevExpress GridView导入导出Excel
- 黄聪:PHP生成折线图、饼图、表格、图表插件控件pChart
- [转]Android中程序与Service交互的方式——交互方式
- 英雄会解读:不一样的回答,一样的CTO
- python 字符串拼接_面试官让用 3 种 python 方法实现字符串拼接 ?对不起我有8种……...
- 5G NGC — 云原生的 5G 核心网架构演进
- OpenFlow Switch —— 软件架构