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. SQL基本概述

    DBMS的种类: 层次数据库HDB 面向对象数据库OODB XML数据库XMLDB 键值存储系统KVS 关系数据库RDB RDBMS(关系数据库管理系统),主要5有种: Oracle Database ...

  2. PS CC2018 命令大全

    1.图像: 设置图像大小:图像->图像大小->设置宽高 约束比例: 解除约束比例: 2.设置大小像素图片不模糊: 双击当前图层->新建图层样式->输入名称->确定-> ...

  3. 深入了解Spring Boot 核心注解原理

    SpringBoot目前是如火如荼,所以今天就跟大家来探讨下SpringBoot的核心注解@SpringBootApplication以及run方法,理解下springBoot为什么不需要XML,达到 ...

  4. 【剑指Offer】25、复杂链表的复制

      题目描述:   输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节 ...

  5. pause、jobs、setitimer(2)、system v ipc(day12)

    一.pause()的使用 #include <unistd.h> int pause(void); 功能:等待信号的到来 返回值: - 错误 errno被设置 只有在信号处理函数执行完毕的 ...

  6. 使用Linux自带的命令logrotate对Nginx日志进行切割

    说明: Nginx安装目录:/usr/local/nginx/Nginx日志目录:/var/log/nginx/error/*.log /var/log/nginx/access/w1/*.log / ...

  7. Golang - 开篇必须吹牛逼

    目录 Golang - 开篇必须吹牛逼 Go牛逼吗 安装环境 Golang - 开篇必须吹牛逼 (1)我们为什么要学 高并发 深度 || 广度 (2)go学习思路和目标 多打多练 掌握go语言 做一个 ...

  8. Oracle笔记 多表查询

    Oracle笔记  多表查询   本次预计讲解的知识点 1. 多表查询的操作.限制.笛卡尔积的问题: 2. 统计函数及分组统计的操作: 3. 子查询的操作,并且结合限定查询.数据排序.多表查询.统计查 ...

  9. 支付宝h5支付从支付到退款

    先说明,支付是之前写好的,调用的是支付宝旧的即时到账接口,所也没有去集成应用,退款调用的是无密即时到账退款接口!!! https://doc.open.alipay.com/支付宝文档资料,蚂蚁金服开 ...

  10. 洛谷 P1903 BZOJ 2120 清橙 A1274【模板】分块/带修改莫队(数颜色)(周奕超)

    试题来源 2011中国国家集训队命题答辩 题目描述 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔 ...