JavaScript-Ajax

开发模式

现在主流的web开发分为前端和后端。

前端是面向用户的一端，即浏览器程序开发(js css html … vue…)。
后端则是为前端提供服务，即服务器程序开发(Node,或者java…)。

前后端操作分为两类：

向服务器提交数据(表单交互)
向服务器查询数据(URL参数交互)

表单交互：
指在HTML中创建一个表单，用户填写表单后提交给服务器，服务器收到表单后返回处理结果。

URL参数交互：
用于浏览器向服务器提交一些请求信息。
例如：http://localhost:3000/index?username=张三&gender=男

从上面的介绍我们可以看出来,基本上前端的数据都需要从后端去获取,那么数据是如何渲染到页面中的呢??同时让用户体验比较好呢?

Ajax概述

Ajax：Asynchronous JavaScript And XML，异步JavaScript和XML技术。
在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法。
包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。
使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

功能： 用于实现与服务器进行异步交互的功能。

不刷新页面更新网页
在页面加载后从服务器请求数据
在页面加载后从服务器接收数据
在后台向服务器发送数据

原理:

AJAX提供与服务器异步通信的能力，可以在Web页面触发的JavaScript事件中向服务器发出异步请求，执行更新或查询数据库。
AJAX的核心是JavaScript对象XMLHttpRequest，该对象在IE 5中首次引入，使用户通过JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过这个对象，您的JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。
当Web服务器的响应返回时，使用JavaScript回调函数和CSS来相应地更新页面的局部内容，而不是刷新整个页面。
在页面与服务器交互的过程中不中断用户操作，用户甚至察觉不到浏览器正在与服务器通信。

Ajax如何工作

网页中发生了一个事件(页面加载、按钮点击…)
由JavaScript创建XMLHttpRequest对象
XMLHttpRequest对象通过open()方法建立对服务器的调用、设置回调函数、调用
send()方法向web服务器发送请求
服务器处理该请求
服务器将响应发送回网页
由JavaScript读取响应
由JavaScript执行正确的动作(比如更新页面)

前端和服务器之间交互对于用户来说是无感知的,用户能感知的就是页面内容发送变化了但是页面并没有被刷新

学习使用Ajax

XMLHttpRequest对象

XMLHttpRequest文档

Ajax 的核心是 XMLHttpRequest 对象。

所有现代浏览器都支持 XMLHttpRequest 对象。XMLHttpRequest 对象用于同步后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。
XMLHttpRequest 对象方法描述

方法	描述
abort()	取消当前请求
getAllResponseHeaders()	把HTTP请求的所有响应头部作为键/值对返回
getResponseHeader(“header”)	返回指定首部的串值
open(method, url, async, user, psw)	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码
send()\|send(content)	将请求发送到服务器,send()用于 GET请求 send(content)用于POST 请求
setRequestHeader(“header”, “value”)	设置header并和请求一起发送 ('post’方法一定要 ),在设置任何头部之前必须先调用open()。

XMLHttpRequest 对象属性：

属性	描述
onreadystatechange	状态改变的事件触发器，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数
readyState	请求的状态。有5个可取值： 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
responseText	服务器的响应，返回数据的文本。
responseXML	服务器的响应，返回数据的兼容DOM的XML文档对象，这个对象可以解析为一个DOM对象。
responseBody	服务器返回的主题（非文本格式）
responseStream	服务器返回的数据流
status	服务器的HTTP状态码（如：404 = “文件末找到” 、200 =“成功” ，等等）
statusText	服务器返回的状态文本信息，HTTP状态码的相应文本（OK或Not Found（未找到）等等）

使用Ajax-get请求

var xhr = new XMLHttpRequest;
xhr.open('get','http://localhost:8888/test/third?username=zhangsan&age=18');
xhr.send()
xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status>=200 && xhr.status<300){var res = xhr.responseText;// 将json字符串转成json对象// res = JSON.parse(res)console.log(res);}}
}

使用Ajax-post请求

             var xhr = new XMLHttpRequest;xhr.open('post', 'http://localhost:7003/test/login');xhr.setRequestHeader("Content-Type", "application/json");xhr.send("{'name':'aaa','pass':'aaa'}")xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {var res = xhr.responseText;// 将json字符串转成json对象// res = JSON.parse(res)console.log(res);}}}

使用Ajax-表单提交请求

FormData文档

let form = document.getElementById('form')//FormData可以一次性获取form表单的全部内容,还可以在手动添加let formData = new FormData(form)var xhr = new XMLHttpRequest;xhr.open('post', 'http://localhost:7003/test/loginForm');xhr.setRequestHeader("Content-Type", "application/json");xhr.send(formData)xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {var res = xhr.responseText;// 将json字符串转成json对象// res = JSON.parse(res)console.log(res);}}}

使用Ajax-跨域请求

使用jsonp模式进行跨域,底层原理就是创建script,携带回调函数,只支持get请求

 <script>var script = document.createElement('script');script.type = 'text/javascript';// 传参并指定回调执行函数为onBackscript.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';document.head.appendChild(script);// 回调执行函数function onBack(res) {alert(JSON.stringify(res));}</script>

其他跨域方式,都是利用第三方技术来完成的,比如nginx,比如Webpack…

注意事项

动态渲染元素问题

使用Ajax 动态添加元素,无法直接进行事件绑定的, 是因为加载顺序的问题,普通js代码是在Ajax获取数据之前就执行完毕了, 所以普通js绑定事件是无法使用的,同时使用选择器也获取不到元素对象的会报错
解决办法: 我们可以通过事件委托的方式监听父级进行绑定子元素就能解决
列:

 <div id="add"></div><script>const add = () => {//省略ajax和标签添加操作}//绑定父元素(已存在的元素)document.querySelector('#add').addEventListener('click', function (e) {console.log(e.target.innerHTML);})</script>

设置请求为同步

       var xhr = new XMLHttpRequest;//将第三个参数设置为false就行xhr.open('post', 'http://localhost:7003/test/login', false);

但是注意的是现在设置为同步会爆警告:
主线程中同步的 XMLHttpRequest 已不赞成使用，因其对终端用户的用户体验存在负面影响。可访问 http://xhr.spec.whatwg.org/ 详细了解 ,

如果不爽的话解决办法使用使用ES7的async和await,

//使用async的方法是异步方法如果在异步方法内部使用await方法那么这个方法将同步处理,(范围只是当前方法内部)const postSync = async function () {const postAwait = function () {return new Promise((resolve, reject) => {var xhr = new XMLHttpRequest;xhr.open('post', 'http://localhost:7003/test/login');xhr.setRequestHeader("Content-Type", "application/json");xhr.send("{'name':'aaa','pass':'aaa'}")xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {//将结果返回resolve(xhr.responseText);}}}})}//阻塞直到返回结果var responseText = await postAwait()var responseText1 = await postAwait()console.log("=====", responseText);console.log("=====", responseText1);console.log("+++++++++++++++++++++++++++++++");}postSync()console.log("=====");

点赞 -收藏-关注-便于以后复习和收到最新内容有其他问题在评论区讨论-或者私信我-收到会在第一时间回复如有侵权，请私信联系我感谢,配合,希望我的努力对你有帮助^_^

JavaScript-Ajax相关推荐

2、.net NVelocity中原生javascript ajax封装使用
在页面上,我们经常会遇到局部刷新的例子,这个时候,就需要用到ajax, 因为很多代码都是公用的,所以我们想到了,将代码封装,简化了使用,减少了冗余 javascript ajax代码如下: var x ...
ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息方能实现. 此处手札供后人参 ...
不可多得的Javascript(AJAX)开发工具－ Aptana
自从开始做Web开发起,一直都没有找到一个很让人满意的Javascript开发工具.从Editplus.Dreamweaver到FrontPage.Visual Studio,没有一样是很称手的.你是 ...
ajax回调函数有时成功有时失败,javascript - Ajax 回调函数行为随机。我做错了什么？...
我有以下行为随机的 ajax 函数.有时会显示警报 success finally.在其他情况下,第二个警报是显示 Failure: my status is 500. promptId 从调用函数 ...
HTML+CSS+JavaScript+Ajax+ECharts实现疫情实时监控大屏-2设计与实现
疫情期间,各类应用系统.大数据系统为防疫抗疫带来了巨大助力.国家博物馆首次将代码列为藏品,那就是抗击疫情期间来自阿里程序员写的健康码第一行代码以及研发人员的签名.这展现了广大程序员在疫情面前,争当勇敢 ...
JavaScript/Ajax/JQuery知识点(BOM/DOM/ScriptEngine/JS引擎)，JSCore
捋顺JavaScript底层知识,重点讲解如原型.作用域.执行上下文.变量对象.this.闭包.按值传递.call.apply.bind.new.继承等难点概念?? JS中的继承?JS的原型模式, ...
HTML+CSS+JavaScript+Ajax+ECharts实现疫情实时监控大屏-1快速上手
1 ECharts简介 ECharts是一款开源的基于JavaScript的数据可视化图表库,可以流畅地运行在PC和移动设备上,兼容当前绝大多数浏览器.它底层依赖矢量图形库ZRender,支持超过1 ...
android html ajax请求,android - HTMLUNIT java javascript ajax - Stack Overflow
I'm trying to parse one video-resource cinemaonline.kg to grab a link to a videofile. At first I tri ...
java ajax翻页_分页工具类前后台代码 Java JavaScript (ajax) 实现讲解
[博客园cnblogs笔者m-yb原创, 转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708] htt ...
WEB前端深入了解JavaScript ajax—XHR对象
前面的话 1999年,微软公司发布IE5,第一次引入新功能:允许javascript脚本向服务器发起HTTP请求.这个功能当时并没有引起注意,直到2004年Gmail发布和2005年Google Ma ...