1. AJAX

异步JavaScript + XML,用于浏览器内部通过前端JavaScript语言操纵,与HTTP服务器进行连接通信的技术。

2. XMLHttpRequest对象

从IE7+,以及当前流行的Chrome,Firefox,Safri,Opera浏览器,提供用于AJAX操作的对象,均为XMLHttpRequest.

var xmlhttp = XMLHttpRequest();

3. 前端处理流程

流程包括以下几个步骤:

  1. 创建XMLHttpRequest对象;
  2. 注册onreadystatechange处理函数(用于异步操作,同步操作不需要注册该函数)
  3. 调用open(请求方法,请求url地址,是否为异步:true异步)

    1. 如果是get|GET,那么建议在调用open之前,把请求url地址构造好,对传递的name=value,其中name和value必须是encodeURIComponent函数返回后的值。
    2. 如果是post|POST,那么可以在调用send方法的时候,传递post数据
  4. 如果是post方法,则需要给发生给HTTP服务器的请求头部增加一个字段:xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
  5. 然后调用send方法,该方法接受一个参数,有name=value&name=value组成的长字符串,其中name,value都是经过encodeURIComponent()函数处理后端值,get请求的数据不在这里提供,直接在open方法的url内提供,此时传递给send的为null参数值。

4. 接收数据

异步的AJAX请求,处理数据的流程,都存在于onreadystatechange处理函数内,首先xhr对象存在有以下几个属性:

  • readyState属性:是一个int整数值,存在以下5个值,每当这个值发生变化,都会触发一次onreadystatechange事件,即:调用注册在该事件上的函数。

    • 0:只是创建了xhr, 没有调用open,没有调用send
    • 1:调用了open,没有调用send
    • 2:调用了send,还没有接收到数据
    • 3:接收到了数据,数据还不全
    • 4:接收到了全部数据,请求处理完成。
  • status属性:HTTP响应头部状态码,比如:200响应成功,对应的statusText值为OK,是一个 int 正数值。
  • statusText属性:HTTP响应头状态名,
  • responseText属性:响应返回的主体部分内容,类型为字符串,格式为Text。
  • responseXML属性:响应返回的主体部分内容,类型为字符串,格式为XML,

5. 示例

/* get */
function testGet() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myElement = document.getElementById('mydiv');
myElement.innerHTML = xmlhttp.responseText;
}
}; var url = "/my/ajax/url" + "?" + encodeURIComponent('name') + "=" + encodeURIComponent("Tim") + "&" + encodeURIComponent('sex') + "=" + encodeURIComponent('male');
xmlhttp.open('get', url, true);
xmlhttp.send(null);
} /* post */
function testPost() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myElement = document.getElementById('mydiv');
myElement.innerHTML = xmlhttp.responseText;
}
}; xmlhttp.open('post', '/my/ajax/url', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var dataStr = encodeURIComponent('name') + “=” + encodeURIComponent('Tim') + '&' + encodeURIComponent('sex') + "=" + encodeURIComponent('male');
xmlhttp.send(dataStr);
}

[TimLinux] JavaScript 原生AJAX介绍的更多相关文章

  1. JavaScript原生Ajax请求纯文本数据

    源代码 ajax1.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  2. javascript原生ajax;

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

  3. javascript原生ajax请求

    class Ajax{ constructor(url, method, data, callback_suc, callback_err, callback_run){ this.RT = true ...

  4. JavaScript的原生Ajax解析

    通过JavaScript的Ajax进行详细的解析过程,从而更好的了解Jquery的Ajax. 顺带,我会在后面把我整理的一整套CSS3,PHP,MYSQL的开发的笔记打包放到百度云,有需要可以直接去百 ...

  5. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  6. javascript实现原生ajax的几种方法介绍

    自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何 ...

  7. 用javascript写原生ajax(笔记)

    AJAX  的全名叫做  Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并 ...

  8. 原生 JavaScript 实现 AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

  9. javascript实现原生ajax

    自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何 ...

随机推荐

  1. jquery.eraser制作擦涂效果

    jquery.eraser制作擦涂效果 <pre><!DOCTYPE html><html> <head> <meta http-equiv=&q ...

  2. Dubbo的应用

    导语:Dubbo是阿里巴巴的一个分布式服务的开源框架,致力于提供高性能和透明化的RPC远程服务调用方案,是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000+个服务提供3,000,000,000 ...

  3. open-falcon监控系统

    官方文档 https://book.open-falcon.org/zh/intro/index.html 一.Open-Falcon介绍 1.监控系统,可以从运营级别(基本配置即可),以及应用级别( ...

  4. nyoj 477-A+B Problem III (fabs() <= 0.00001)

    477-A+B Problem III 内存限制:64MB 时间限制:1000ms 特判: No 通过数:18 提交数:34 难度:1 题目描述: 求A+B是否与C相等. 输入描述: T组测试数据. ...

  5. Ocelot学习笔记

    最近因工作需要,开始学习Ocelot.首先简单介绍一下,Ocelot是一个基于.net core的开源webapi 服务网关项目,目前已经支持了IdentityServer认证.根据 作者介绍,Oce ...

  6. opencv 3 core组件进阶(1 访问图像中的像素)

    访问图像像素的三类方法 ·方法一 指针访问:C操作符[ ]; ·方法二 迭代器iterator; ·方法三 动态地址计算. #include <opencv2/core/core.hpp> ...

  7. 菜鸟手把手学Shiro之shiro授权流程

    一.首先我们从整体去看一下授权流程,然后再根据源码去分析授权流程.如下图: 流程如下: 1.首先调用 Subject.isPermitted*/hasRole*接口,其会委托给 SecurityMan ...

  8. PowerDesigner从安装到同步数据库

    前言 最近项目在如火如荼的进行着4.0版本的数据库设计工作,我们几个后端小伙伴也马不停蹄的进行着数据库的设计.使用的设计软件是PowerDesigner,这里记录一些常见的问题以备日后查看 安装 链接 ...

  9. Feature Fusion for Online Mutual Knowledge Distillation (CVPR 2019)

    一.解决问题 如何将特征融合与知识蒸馏结合起来,提高模型性能 二.创新点 支持多子网络分支的在线互学习 子网络可以是相同结构也可以是不同结构 应用特征拼接.depthwise+pointwise,将特 ...

  10. day03_正则表达式

    1.数据分类 数据的分类 ​ 定义:数据以行为单位,每一个数据表示一个实体的信息.每一行数据的属性都是一样的. ​ 常见的结构化数据为关系型数据库存储数据. 半结构化数据 ​ 定义:结构化数据的另一种 ...