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
<?php
echo '欢迎' . $_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”);
}

  

使用原生JS实现简单的ajax的更多相关文章

  1. 用原生JS&PHP简单的AJAX实例

    功能介绍: 1)file.html 使用 xmlhttp 请求服务器端文件 text ,并更新 file.html 的部分内容 2)update.html 使用 xmlhttp 通过 filewrit ...

  2. 原生js,jquery通过ajax获得后台json数据动态新增页面元素

    一.原生js通过ajax获取json数据 因为IE浏览器对ajax对象的创建和其他浏览器不同,为了兼容全部浏览器,我用下面的代码: function createXMLHttpRequest(){ t ...

  3. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  4. 原生JS实现简单富文本编辑器2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 原生JS实现简单富文本编辑器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 原生JS实现简单留言板功能

    原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...

  7. 原生js实现简单移动端轮播图

    最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...

  8. 原生js实现简单JSONP

    JSONP是一种非常常见的实现跨域请求的方法.其基本思想是利用浏览器中可以跨域请求外链的JS文件,利用这一特性实现数据传输. 用原生JS实现JSONP非常简单,无非几点: 1)定义一个函数,用于处理接 ...

  9. 原生JS代码实现一个Ajax异步请求

    异步加载的方式 (1) defer,只支持IE (2) async: (3) 创建script,插入到DOM中,加载完毕后callBack 实现ajax之前必须要创建一个 XMLHttpRequest ...

随机推荐

  1. 用了那么多项目管理工具,还是CORNERSTONE这款最好用

    在与软件开发有关的项目,往往会出现很难管理情况.许多事情都需提前计划.控制与管理,所以许多项目经理很容易迷失在计划的过程中.幸运的是,市场上提供了各种各样的项目管理工具.但不幸的是,工具实在是太多了. ...

  2. BZOJ 1577: [Usaco2009 Feb]庙会捷运Fair Shuttle 线段树 + 贪心

    escription 公交车一共经过N(1<=N<=20000)个站点,从站点1一直驶到站点N.K(1<=K<=50000)群奶牛希望搭乘这辆公交车.第i群牛一共有Mi(1&l ...

  3. vue小白学习笔记

    <div id="div"> <h2>{{ key }}</h2> </div> new Vue ({ el : "#di ...

  4. eas之日期控件

    日期选择框能进行日期和时间的编辑,默认情况下只能进行日期选择“××××年××月××日”,可通过调用用函数setTimeEnabled(boolean)来设置是否也有时间编辑.对日期进行编辑时,可手工直 ...

  5. 从读写分离到 CQRS,张大胖是如何解决性能问题的?

    转自:https://mp.weixin.qq.com/s/rpiYZkxiLKa77OFw8XaBwA 不堪重负的数据库 张大胖公司的数据库已经不堪重负了. 这个系统最早是两个实习生写的, 按照最初 ...

  6. AT+CSMP 设置短消息文本参数

    AT+CSMP 设置短消息文本参数 2009-05-18 12:03 AT+CSMP 设置短消息文本参数(text模式下) 设置:AT+CSMP=<fo>,<vp/scts>, ...

  7. F - Count the Colors

    F - Count the Colors ZOJ - 1610   思路:调了一个小时,但是发现自己线段树木有写错,颜色统计出了错误.但是不明白自己颜色统计为什么错了. 求大佬指点迷津.思路很简单,就 ...

  8. maven 自动部署到tomcat

    使用maven的自动部署功能可以很方便的将maven工程自动部署到远程tomcat服务器,减少部署时间,方便快捷. 一.配置tomcat manager 1.编辑tomcat目录下,conf/tomc ...

  9. [Angular] Freshness Caching Policy - Network First, Cache Last

    In some cases, you want to get fresh data instead of cache data to the screen, such as stock applica ...

  10. 软件project师周兆熊给IT学子的倾情奉献

    [来信] 贺老师: 你好,我是中兴通讯的一名软件开发project师,名叫周兆熊. 近期看了您的新书<逆袭大学:传给IT学子的正能量>,感觉你真心为当代学子答疑解惑.非常值得敬佩! 从上大 ...