1、什么是Ajax？

全称：Asynchronous JavaScript and XML  （异步的 JavaScript和 xml），是前后端数据交互的一种技术（前端通过 Ajax 发送http请求->后台接受前端数据并处理->处理完毕返回响应数据）。原理简单但功能强大。

核心优点：在不刷新整个页面的情况下实现局部数据刷新。大大节省了资源的消耗。

应用范围：现阶段的前后端数据交互大多使用 Ajax 技术。

2、怎么发送一个 Ajax请求 。有以下几个关键点：

①创建 XMLHttpRequest 对象

这个对象 是 实现 Ajax的基础 用于和服务器进行数据交互

var xh = new XMLHttpRequest();

②调用 XMLHttpRequest 的 open() 和 send() 方法

xh.open(method,url,true|false);

三个参数 分别是：method，请求的方法，了解 post 和 get 基本就够了（一般就用这两种方法）。url:请求的服务器API接口。最后一个是否异步，默认是异步。

xh.send(string);

参数 ：当open中的 method 是post 时， string代表的是要向后台传送的数据。当 method 是 get 时 string为空代表get请求不通过send方法传送数据。

扩展：post和get传参数的区别：get通过地址栏向后台传数据 例如：http://www.baidu.com?name=zjl&age=18 ，“？”后面的就是传送的数据。post传送的数据就是通过上面讲到的send()向后台发送数据.

③前面两点讲了如何发送一个请求 那么如何接受后台返回的数据？。

xh.onreadystatechange() 通过该事件监听当前请求的状态并接受后台传送的数据，readyState 改变时就会触发该事件

readyState取值：

  • 0: 请求未初始化
  • 1:服务器连接已建立
  • 2：请求已接收
  • 3：请求处理中
  • 4：请求已完成，且响应已就绪

常见响应状态码(status)：200：请求响应成功  404：找不到路径 检查请求路径是否正确

了解readyState 和 status 之后 即可判断何时接收后台传回的数据

④通过 xh.responseText 属性获得响应的字符串。如果服务器响应的是 xml ，则通过 xh.responseXML 属性进行接收。

3.通过以上的了解，直接看个Ajax完整实例。注意：通过控制台查看打印结果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>ajax</title>

    <script>

        // js 的原生 Ajax

        // 获取所有的数据

        function getAll(){

            // 创建 XMLHttpRequest 实例

            var http = new XMLHttpRequest();

            // 发送请求的方式 和 URL 地址

            http.open('GET','http://www.wangshuwen.com/api/getRegion');//访问一个免费接口，如果失效可替换

            http.onreadystatechange = function(){

                if (http.status === 200 && http.readyState === 4) {

                    console.log(http.responseText);

                    var res = http.responseText;// 响应体数据

                    console.log(JSON.parse(res));// 将 json 数据转化为js数据

                }

            }

            // 发送请求

            http.send();

        }

        getAll();

    </script>

</head>

<body>

</body>

</html>

原生js之Ajax的更多相关文章

  1. 原生js实现Ajax

    一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...

  2. 使用原生js写ajax

    // 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined") ...

  3. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  4. 原生JS实现Ajax及Ajax的跨域请求

      前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...

  5. 原生JS的Ajax技术

    1.同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待  卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡 ...

  6. 原生js中用Ajax进行get传参

    原生js中用Ajax进行get传参 案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  7. 原生js实现ajax与jquery的ajax库，及json

    这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...

  8. 用原生js实现ajax、jsonp

    转载: http://www.cnblogs.com/yangheng/p/6065910.html 一.原生js实现ajax $.ajax({ url: '', type: 'post', data ...

  9. 原生JS实现ajax 发送post请求

    1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post ...

  10. 原生js写Ajax

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

随机推荐

  1. Java集合系列(一)：集合的定义及分类

    1. 集合的定义 什么是集合呢? 定义:集合是一个存放对象的引用的容器. 在Java中,集合位于java.util包下. 2. 集合和数组的区别(面试常问) 提到容器,就会想起数组,那么集合和数组的区 ...

  2. 第一篇博客 安装open live writer

    第一篇博客安装open live writer http://openlivewriter.org/ 有的人可能会打不开,所以我准备了一个百度云的链接地址 链接:https://pan.baidu.c ...

  3. 恢复在iterm2中当滚动光标时候触发滚动历史记录的问题

    在Iterm2中,如果你上下滚动光标(上下滑动触摸板.或者滚动鼠标滚轮),通常情况下是触发了屏幕内容上下滚动. 但是在某些异常情况下,却触发了命令行历史记录的上下滚动,效果和你连续按了多次键盘的上下键 ...

  4. python模块知识一 自定义模块、time、datetime时间模块

    第五章 模块 1.自定义模块: 模块分类: 内置模块(标准库)-- python解释器自带的.py文件(模块) 第三方模块(各种大神写的)-- 需要额外下载(并发编程pypi) 自定义模块(自己写的) ...

  5. spark 源码分析之十--Spark RPC剖析之TransportResponseHandler、TransportRequestHandler和TransportChannelHandler剖析

    spark 源码分析之十--Spark RPC剖析之TransportResponseHandler.TransportRequestHandler和TransportChannelHandler剖析 ...

  6. 【iOS】打印方法名

    为了便于追踪程序运行过程,可以在日志打印方法名,示例代码如下: NSLog(@"%@", NSStringFromSelector(_cmd)); 结果如图所示: 此外,在多个中, ...

  7. iOS Xcode6 新建OC Category文件

    首先:File -> New File 接下来界面如下,选择Objective-C File,然后Next 在这里选择 Category 即可

  8. android蓝牙通讯开发(详细)

    新建一个工程之后,我们可以先看到界面左边的项目栏,我们可以看到,除了app目录以外,大多数的文件和目录都是自动生成的,我们也不需要对他们进行修改,而app目录之下的文件才是我们工作的重点.下面,我先对 ...

  9. BME200加密网关,在电力与工业应用的加密网关设计与介绍

    加密通信网关,顾名思义就是带加密的通信网关终端,  一般业内主是需用到是工业通信关行业的为主的.,BME200加密通信网关,主要电力和工业互联网相关领域开发的一款加密通信网关. 为什么出现加密网关 1 ...

  10. RGB颜色 三者都是0为黑色而255是白色 解释

    问题: RGB颜色 都是0为黑色而255是白色 与日常生活的黑色白色差距怎么那么大,(与物理学中的黑色吸收光是否相悖)而且为什么要这样定义呢? 链接:https://www.zhihu.com/que ...