【前端】——Ajax

一、同步请求和异步请求

二、原生 Ajax 的使用

三、 jQuery 中的 Ajax

一、同步请求和异步请求

先解释一下同步和异步的概念：

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。

异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

同步请求:

客户端请求(等待)->服务端处理->响应->页面载入（缺少对象:XMLhttpRequest）
这时候如果有错误，只能再次发送请求，再次等待

异步请求：

比如当你填写邮箱地址的时候，页面当时就把邮箱地址发送到了服务器（也就是页面发送了一个请求），服务器做处理和响应，得到你的邮箱地址填写重复了，把响应结果发给页面，在这个过程中你仍然可以填写其他内容，这时候服务器会提示你有重复的邮箱地址，在页面上的表现只是邮箱地址旁别加了一行字或者把整个文本框标红，并没有重新刷你的页面，所有的填写错误会实时的显示出来，你也会实时的更正。这个过程中，你会有整个页面的刷新，也不会有整个页面的提交和等待，最后提交，一切都会搞定的

二、原生 Ajax 的使用

1.概念

AJAX即“Asynchronous Javascript And XML”（异步 JavaScript和XML），AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
它是一套综合了多项技术的浏览器端网页开发技术。这些技术包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.

2.步骤

(1)XMLHttpRequest

XMLHttpRequest 是浏览器的内置对象, 作用是在后台与服务器通信( 交换数据 )
用于网页的局部更新, 而不是刷新整个页面

    // 创建一个新的 XMLHttpRequest 对象var xhr = new XMLHttpRequest();

()请求 Request

HTTP 请求由 3 个部分组成, 正好和 XMLHttpRequest 相对应

    //请求行 openxhr.open( 'post', 'url' );//请求头 setRequestHeader  // post 请求需要设置头xhr.setRequestHeader( 'Conent-Type' , 'application/x-www-form-            urlencoed' ); // get 请求可以不设置请求头//请求主体 sendxhr.send( 'name=Jim&age=18' ); // get 可以传空, 因为在头的时候已经传过数据了

(3)响应 Response

    //HTTP 响应是由服务端放出的, 客户端更应该关心度额是响应的结果//HTTP 响应由 3 个部分组成, 与 XMLHttpRequest 的方法或属性成对应关系//由于服务器做出响应需要时间( 网络延迟等原因 ),所以需要监听服务器响应状态, 再进行处理if( xhr.readyState == 4 && xhr.status == 200 ){// 进行下一步操作, 如渲染页面document.querySelector( '#result' ).innerHTML = xhr.responseText;}

3.get 和 post 的差异

get 没有请求主体, 使用 xhr.send(null) 发送请求主体

get 可以通过请求 url 上添加请求函数

post 可以通过 xhr.send( 'name=itcast&age=10' ) 发送请求主体

post 需要设置

get 性能高( 基本上获取内容都是使用get )

get 大小限制约 4kb, post 则没有限制

4.get 方式的请求响应

    var xhr = new XMLHttpRequest;xhr.open('get','url');xhr.send(null);xhr.onreadystatechange = function(){if(xhr.status == 200 && xhr.readyState == 4){/*获取到XML格式内容  放回的是DOM对象  document*/var xml = xhr.responseXML;/*通过选着器可以获取到xml的数据*/console.log(xml.querySelectorAll('array')[0].querySelector('src').innerHTML);}}

5.post 请求和响应

    //初始化var xhr = new XMLHttpRequest();//请求行xhr.open("post","url");//请求头xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")//请求内容xhr.send("username=rxt&password=1234");//监听响应改变xhr.onreadystatechange = function(){/*什么时候才算是http通讯结束 在readyState=4的是 响应完成*//*什么是才算是通讯成  status 200 */if(xhr.status ==200 && xhr.readyState == 4){document.querySelector("div").innerHTML = xhr.responseText;}}

三、 jQuery 中的 Ajax

1.jQuery为我们提供了更强大的Ajax封装

$.ajax({}) 可配置方式发起Ajax请求

$.get() 以GET方式发起Ajax请求

$.post() 以POST方式发起Ajax请求

$('form').serialize() 序列化表单（即格式化key=val&key=val）

url 接口地址

type 请求方式

timeout 请求超时

dataType 服务器返回格式

data 发送请求数据

beforeSend: function () {} 请求发起前调用

success 成功响应后调用

error 错误响应时调用

complete 响应完成时调用（包括成功和失败）

2.$.ajax 使用

$.ajax({type : 'post',url : 'url',data : {'mobile' : phone},dataType : 'json',beforeSend : function(){},success : function(info){//成功处理}
});

【前端】——Ajax相关推荐

webApi前端ajax调用后端返回{“readyState“:0,“status“:0,“statusText“:“error“}解决方案
webApi前端ajax调用后端返回{"readyState":0,"status":0,"statusText":"error& ...
防抖与节流方案_前端ajax优化解决方案
伴随着前端ajax的应用场景越来越多,那就免不了一个整合的ajax优化解决方案了,自己优化太麻烦?没事,有它帮你解决:hajax 与当下比较热门的请求库 axios 和原生的 fetch相比,haja ...
前端ajax传递json格式参数，后端springboot接收
在做开发的过程中,前端ajax传参和后端springboot接收参数经常用到,之前老是把这些搞混,导致出现错误,也在网上查阅了很多资料,再根据自己的经验和测试,对这部分内容做了一些使用总结.后面会再慢 ...
【ajax】前端ajax传值的几种方法
前端ajax传值的几种方法注意事项 1.传值格式 2.ajax在sucecess后继续执行代码 3.传值方式传图片文件到后端正常传本博文仅为记录项目过程中遇到的熟练代码注意事项 1.传值格式 ...
前端ajax与后端php数据传输,前端ajax与后端交互详解
前端中常常用的与后端交换数据的话,通常是要用到ajax这种方法的,本文主要介绍了前端ajax的各种与后端交互的相关知识,具有很好的参考价值.下面跟着小编一起来看下吧,希望能帮助到大家. 但是交互的方式 ...
ajax传图片以及后台接收,前端ajax上传文件，图片，后端nodejs接收文件；
前端ajax上传文件,图片,后端nodejs接收文件: 学习了nodejs,就想实现一下有进度条的文件上传,html 在作这个功能的时候遇到的问题前端用普通的ajax没法实现文件上传,只能post, ...
ssm图片上传前端Ajax
//头像上传前端html代码 <form action="" id="modifyUserFormPageUserform" enctype=" ...
使用Ajax实现简单的增删查改前端Ajax传的值，后端如何获取
实现查询和增删改一.Ajax最基本语法二.增删查改 1.查询(Get请求) 2.增删改(Post请求) 三.后台(MVC/WebForm) 1.MVC(Post请求) 2.WebForm(Post ...
后端传验证码图片前端ajax怎么显示图片
后端传验证码图片前端,ajax怎么显示图片.验证码后端返给前端的是一张验证码的图片,如下: 再看浏览器response里的返回
java接口返回map集合数据；前端ajax获取，遍历时无序
因业务需求,在同一张表格中,将地区.全国业务数据按年份分组统计,将相同年份的数据组装成一条数据在表格中对比显示.效果图如下: 当前地区全国年度季度成交额净利润成交额净利润 2019 1 ...

【前端】——Ajax

一、同步请求和异步请求

二、原生 Ajax 的使用

三、 jQuery 中的 Ajax

【前端】——Ajax相关推荐

最新文章

热门文章