1. ajax的介绍

1.1 含义

ajax 的全称是Asynchronous JavaScript and XML

简单理解下:ajax就是异步的js和服务端的数据

1.2 组成

异步的js:事件,对象等
其他js:数据处理和解析的js
服务器的载体:xhr对象
服务端的数据:json,xhr,html,txt等字符型数据

1.3 作用

它作为前端向后端发送数据请求的重要手段,可以实现网页无刷新加载数据.

1.4 利弊

与传统的form表单的get和post方式相比较,ajax的优点很明显

优点:1.提升加载速度,实现局部加载
2.节省性能,能很好提升用户体验

当然,事物都是相对的,缺点如下

缺点:1.破坏了浏览器的前进后退功能
2.破坏了seo的网络优化

2. ajax的书写

2.1.1 ajax的GET请求方式

GET请求的数据会附在URL之后, 以 ? 分割URL和传输数据, 参数之间以 & 相连

//1.创建xhr对象
var xhr = new XMLHttpRequest();
//2.xhr的发送方式:get
xhr.open("GET", url, true)
//参数1:请求方式
//参数2:url是后端文件所在服务器的位置
//参数3:异步true;同步false
//3.监听xhr对象的状态
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
//客户端状态码为4:响应内容解析完成,可以调用
//服务端的状态码为200:交易成功
console.log(xhr.responseTxt)
//返回响应信息
}
//4.发送信息
xhr.send();

2.1.2 小bug

以上是最基本的ajax代码,有两处小bug, 在封装过程中会解决

bug1:传的参数为空时,会报错
bug2:浏览器的缓存干扰使得数据无法刷新

2.1.3 ajax的Get方式封装

//接收三个参数:后端文件地址,回调函数和数据(对象格式)
function ajaxGet(url, callback, data) {
//1.解析发送的数据
data = data || {};
//修复bug1:参数为空变为空对象
var str = "";
for (var i in data) {
str += `${i}=${data[i]}&`;
//拼接get的数据格式
}
//2.拼接url
var d = new Date();
url = url + "?" + str + "__sjc=" + d.getTime();
//修复bug2:拼接一个不会重复的时间戳,欺骗缓存;
//时间戳的命名应该尽量复杂,防止后端读取到.
//3. 准备ajax
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
callback(xhr.responseText);
}
}
xhr.send();
}

2.2.1 ajax的POST请求方式

ajax的POST和GET的结构大体相同,但有以下三点区别

区别1:post发送数据位置是send()内,而不是拼接在url后
区别2:open的请求方式变为POST
区别3:send会原样发送数据,为确保后端能识别,必须设置数据格式为表单格式

2.2.1 ajax的POST方式封装

function ajaxPost(url, callback, data) {
data = data || {};
var str = "";
for (var i in data) {
str += `${i}=${data[i]}&`;
}
//不必拼接时间戳
var xhr = new XMLHttpRequest();
//区别2
xhr.open("POST", url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
callback(xhr.responseText);
}
}
//区别3:发送前设置数据格式
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//区别1:数据发送在send内
xhr.send(str);
}

最详细的原生js实现ajax的封装的更多相关文章

  1. 原生js实现Ajax

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

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

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

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

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

  4. 原生JS的Ajax技术

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

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

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

  6. 原生js实现ajax与jquery的ajax库,及json

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

  7. 用原生js实现ajax、jsonp

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

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

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

  9. 原生js写Ajax

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

随机推荐

  1. angular 中父子路由

    1. 创建组件引入组件 import { NewsaddComponent } from './components/newsadd/newsadd.component'; import { News ...

  2. 算法习题---4-4骰子涂色(UVa253)

    一:题目 分别对两个骰子的六个面涂色r-红 b-蓝 g-绿,通过转动骰子,看两个骰子是不是一样的涂色方法 (一)题目详解 题目规定了正方体的六个面的序号:从1-,按照这个需要提供涂色序列 (二)案例展 ...

  3. robot用例执行常用命令(还没试)

    执行命令 执行一个用例 robot -t “testcase_name“ data_test.robot 按用例文件执行 robot data_test.robot或者robot --suite “p ...

  4. Matlab批量获取子文件夹与文件名

    批量得到父文件夹下所有子文件夹的路径的MATLAB函数. function [SubFolders] = GetFolders(ParentFolder) %GetFolders % 函数功能为获取父 ...

  5. 《Fluid Engine Development》 学习笔记3-光滑粒子流体动力学

    用粒子表示流体最热门的方法就是就是光滑粒子流体动力学(Smoothed Particle Hydrodynamics (SPH).) 这种方法模糊了流体的边界,用有限数量的粒子代表流体,该方法的基本思 ...

  6. Qt598x64vs2017.跨线程传递std::string

    1.Qt编译的时候 提示 str::string 需要在main(...)中注册什么的(大概是这个意思,记不清了),于是 在main(...)中调用了 “qRegisterMetaType<st ...

  7. 移动架构-AOP面向切面编程

    AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的一个热点, ...

  8. hupu面试

    1.mybatis更新一条数据时,如果某字段为空,则不更新它,使用默认值? <update id="updateProduct" parameterType="Pr ...

  9. NOIp 2009:靶形数独

    题目描述 Description 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他 们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向Z 博士请教, Z ...

  10. Win10下 jdk的安装

    jdk 的下载地址 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 在 D 盘 ...