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. C# 获取 IEnumerable 集合的个数

    IEnumerable<DocApply> data1 = data.Where(n => n.DocName.Contains(search)); if (data1.GetEnu ...

  2. tomcat多实例的部署

    解压部署tomcat程序创建2个实例的工作目录mkdir -p /usr/local/tomcat8_instance/tomcat1mkdir -p /usr/local/tomcat8_insta ...

  3. eas之EntityViewInfo对象mainQuery中查询条件

    EntityViewInfo对象mainQuery中查询条件:  添加查询字段:(Sql语句中的selectz子句内容)    SelecttorItemCollection sic=new Sele ...

  4. react-native页面间传递数据的几种方式

    1. 利用react-native 事件DeviceEventEmitter 监听广播 应用场景: - 表单提交页面, A页面跳转到B页面选人, 然后返回A页面, 需要将B页面选择的数据传回A页面. ...

  5. Ubuntu14.043下QT5.5的安装与一点问题

    请注明来自于 http://www.cnblogs.com/usegear/p/5100720.html 1.下载qt-opensource-linux-x86-5.5.0.run(去教育镜像网站下载 ...

  6. (31)Spring Boot导入XML配置【从零开始学Spring Boot】

    [来也匆匆,去也匆匆,在此留下您的脚印吧,转发点赞评论: 您的认可是我最大的动力,感谢您的支持] Spring Boot理念就是零配置编程,但是如果绝对需要使用XML的配置,我们建议您仍旧从一个@Co ...

  7. 数位dp无前导零

    题目链接:http://    www.lydsy.com/JudgeOnline/problem.php?id=1026 #include <iostream> #include < ...

  8. CodeForces - 340 C - Tourist Problem

    先上题目: A - Tourist Problem Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & ...

  9. 【ACM】hdu_1862_EXCEL排序_201308091948

    EXCEL排序 Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  10. vs code--snippet与快速提示

    因为快速语法提示和建议冲突,所以要么禁用语法提示,要么禁用建议 Note that quick suggestions and Tab completion might interfere becau ...