啊啊啊~~~~~ Ajax

1、什么是Ajax

Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。

2、同步与异步的区别

同步提交：同步请求是指当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才会执行后续的代码，

异步提交：异步请求就当发出请求的同时，浏览器可以继续做任何事， Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。

创建XMLHttpRequest对象

    //1.创建xhr对象const xhr = new XMLHttpRequest() //2.调用xhr.open()函数xhr.open('get', './data.php')//如果是用 ajax 对象发送 post 请求，必须要先设置一下请求头中的 content- type//xhr.setRequestHeader('content-type', 'application/x-www-form- urlencoded')//3.调用xhr.send()函数xhr.send()//4.监听xhr.onreadyStateChange事件xhr.onreadyStateChange = function () {// 每次 readyState 改变的时候都会触发该事件// 我们就在这里判断 readyState 的值是不是到 4// 并且 http 的状态码是不是 200 ~ 299if (xhr.readyState === 4 && xhr.status==200) {// 这里表示验证通过// 我们就可以获取服务端给我们响应的内容了 }
}

实现跨域请求Jsonp

JSONP的实现原理就是通过<script>标签的src属性,请求跨域的接口数据,并通过函数调用的形式,接受跨域接口响应回来的数据.

$.ajax({    url: "/login/authenticate",   //请求的url地址   dataType: "json",   //返回格式为json    async: true, //请求是否异步，默认为异步，这也是ajax重要特性    data: data,    //参数值    type: "GET",   //请求方式    beforeSend: function(request) {        //请求前的处理...},   success: function(data) {        //请求成功时处理...},   complete: function() {        //请求完成的处理...   },    error: function() {        //请求出错处理...}
});

一个最简单的Ajax

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>yixiaoqingchen</title>//引入一个jquery的js<script src="jquery.js"></script>
</head><body><button id="btnGET">发起GET请求</button><button id="btnPOST">发起POST请求</button><script>$(function () {//给btnGET按钮绑定点击事件$('#btnGET').on('click', function () {$.ajax({type: 'GET',url: 'http://www.liulongbin.top:3006/api/getbooks',data: {id: 1},success: function (res) {console.log(res)}})})//给 btnPOST按钮绑定点击事件$('#btnPOST').on('click', function () {$.ajax({type: 'POST',url: 'http://www.liulongbin.top:3006/api/addbook',data: {//提交给服务器的数据bookname: '史记',author: '司马迁',publisher: '上海图书出版社'},success: function (res) {console.log(res)}})})})</script>
</body></html>

小伙伴们可以点赞，关注一波✨

啊啊啊~~~~~ Ajax相关推荐

HTML5中的webSocket、ajax、http
本文原链接:https://cloud.tencent.com/developer/article/1115496 https://cloud.tencent.com/developer/articl ...
ajax的请求参数详解以及前后台交互详解
function rejectSub(){//从隐藏域中拿到userIDvar userId = $("input:hidden[name='userId']").val();va ...
ActiveMQ应用笔记四：Ajax应用
环境: apache-activemq-5.8.0 Tomcat7.0.29 jdk1.7.0_03 win7 eclipse(Version: Helios Service Release 2Bui ...
jQuery Ajax 实例全解析（转载）
jQuery Ajax 实例全解析 jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我 ...
Ajax使用，爬取微博正文，点赞，评论数。
本人声明,该文章仅为学习所用,未做任何其他用途. 各位看官老爷们大家好,这一次我们来聊聊使用Ajax爬取微博评论数,正文,点赞数. 首先我们想想思路. 一.最开始的,也是我们用的最多和必要的,模拟浏览 ...
Ajax广告词,用 ajax 的方法解决网页广告显示的问题
用 ajax 的方法解决网页广告显示的问题 2017年12月12日 | 萬仟网IT编程 | 我要评论有的时候google或者其他广告显示不出来,造成页面访问速度奇慢,怎么样解决这个问题呢?我们可以借 ...
html+spring boot简单的ajax数据传输实现
本篇讲解在前后端不分离情况下的html+spring boot的项目数据传输实现首先,后台我写了三个接口 package com.demo.ajax.controller;import com.de ...
form表单提交前进行ajax或js验证，校验不通过不提交
在使用form表单进行提交数据前,需要进行数据的校验->表单的校验(如:两次密码输入是否相同)+后台数据的校验(如:账号是否存在),这个时候,如果哪步校验不通过,表单将停止提交,同时避免后台主键 ...
使用ajax不刷新页面获取、操作数据
在使用jsp或html时,利用ajax达到不刷新页面就可以获取.操作数据. 首先上代码 (html+js) 在此处需要引入jquery插件  < ...