首页 > 其他分享 >什么是Ajax?全面了解?

什么是Ajax?全面了解?

时间:2022-09-07 20:45:28浏览次数:74  
标签:异步 请求 Ajax 了解 全面 服务器 数据 页面

目录
我们知道,前端页面想要和后端进行数据交互,可以通过以下方式

将参数添加到url中,后端通过get方式从url中获取数据 GET请求

前端页面通过form表单,将数据以get或者post的方式发送给后端 POST请求/GET请求

前端通过a标签(和使用url方式参数的方式) GET请求

1.什么是Ajax?

1.AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”。即使用javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。

2.Ajax不是新的编程语言,而是一种使用现有标准的新方法。其实就是js自带的功能 我们学习的是jQuery封装之后版本

2.Ajex的优点

1.Ajax最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

2.Ajax不需要任何浏览器插件,但需要用户允许javaScript在浏览器上执行。

同步交互: 客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求。
异步交互: 客户端发出一个请求后,无需要等待服务器响应结束,就可以发出第二个请求。
Ajax用于"局部刷新页面"和"异步提交"的特点

异步提交: 提交完认为不需要原地等待,立马就做其他事
局部刷新: 不在局限于整个页面的刷新,而是在于局部的某一个页面的小块刷新
因此和使用Form表单和后端进行数据交互的方式比较,具有以下优点:

1.Ajax使用JavaScript技术向服务器发送异步请求
2.Ajax请求无须刷新整个页面

因为服务器响应内容不再是整个页面,而是页面中的部分内容,所以Ajax性能高!

3.Ajax工作原理

1.Ajax相当于在用户和服务器之间加了一个中间层(Ajax引擎),使用户操作与服务器响应异步化。

2.并不是所有用户请求都是提交给服务器,像一些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取数据时再由Ajax引擎代为向服务器提交请求。

3.客户端发送请求,请求交给Ajax,Ajax把请求提交给服务器,服务器进行业务处理,服务器响应数据交给Ajax对象,Ajax对象接收数据,由JavaScript把数据写到页面上。
要完整实现一个Ajax异步调用和局部刷新,同窗需要以下几个步骤:

1.创建XMLHttpRequest对象,既创建一个异步调用对象
2.创建一个新的HTTP请求,并指定该HTTP请求的方法,URL及验证信息
3.设置响应HTTP请求状态变化的函数
4.发送HTTP请求
5.获取异步调用返回数据
6.使用JavaSciript和DOM实现局部刷新

注意:
Ajax传输数据为XML(当然,传输数据不只是XML,现在更多使用json数据,基本上web页面都是Ajax)

4.基本语法

$.ajax({
	// 发送地址 1.不写默认朝当前所在url提交数据 
	// 2.全写 指名道姓 https://www.baidu.com 
	// 3.只写后缀/login/
	url: '',  
	type: 'get/post',  	// 请求方式 默认get  
	data: {'username':'jason', 'password':123}  //   要发送的数据
	success:function(args){
		// 回调函数(异步回调机制)
	}
})


解析(重要):
    1.当你在利用ajax进行前后端交互的时候
    2.当后端给你返回结果的时候会自动触发 args接受后端的返回结果

5.数据编码格式

Content-Type
    格式1:urlencoded
        数据格式: name=jason&pwd=123&hobby=read
        django后端统一处理到request.POST中
    格式2:formdata
       数据格式: 无法查阅
       django后端自动将文件数据处理到request.FILES 普通数据request.POST
    格式3:application/json
       数据格式: json格式
            django后端不会处理 在request.body中存储(bytes类型) 自己处理
       语法注意事项
            data: JSON.stringify({'name':'jason','pwd':123}),
            contentType:'application/json',

6.ajax携带文件数据

$('#d3').click(function () {
        // 1.产生内置对象
        let formData = new FormData();
        // 2.添加普通数据
        formData.append('username',$('#d1').val())
        // 3.添加文件数据
        formData.append('file', $('#d2')[0].files[0])
        // 4.发送ajax请求
        $.ajax({
            url:'',
            type:'post',
            data:formData,
            contentType:false,  // 不使用任何编码
            processData:false,  // 不处理数据对象
            success:function (args) {
            }
        })
    })

7.回调函数

后端跟ajax交互 不应该再返回页面 通常情况下都是返回json格式数据
    前端针对HttpResponse和JsonResponse返回的json格式数据处理策略不同
        前者不会自动反序列化 而后者会自动反序列化
        如果想让前者也自动反序列化可以添加一个固定的参数
            dataType:'JSON'

标签:异步,请求,Ajax,了解,全面,服务器,数据,页面
From: https://www.cnblogs.com/zxr1002/p/16667188.html

相关文章

  • ajax
    一、Ajax'''页面不刷新的情况下可以与后端进行数据交互异步提交局部刷新eg:码云用户注册无序点击按钮内部也可以完成数据交互ajax不是一门全新知识本质......
  • 你了解的HTTP状态码有哪些?
    成功(2XX)状态码原因短语说明200OK客户端向服务端发送请求,服务端正确处理201Created通常是在POST请求或者PUT请求后创建了内容,从而返回响应202Accepte......
  • 了解 Git——它让你成为更好的开发者
    了解Git——它让你成为更好的开发者我能给任何程序员的最有用的建议就是熟悉git。Git是一个版本控制系统。我们都听说过它并且大致知道它是关于什么的。但出乎意料地......
  • ajax实现发送邮件验证码倒计时功能
    1.实现的效果:   2.前台页面+js1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8">5<title></title>6</head>7......
  • 了解 ES6 中 var、let 和 const 的范围
    了解ES6中var、let和const的范围了解ES6中的全局、本地和块级作用域发病前ES2015(ES6),这曾是statement是在JavaScript中声明变量的唯一选项。然而,由于......
  • 五分钟了解 Databend 全新 SQL 类型系统
    引言类型系统是数据库的一个重要组成部分,它提供了一种一致的方式来确定SQL中的数据类型。类型系统的设计很大程度影响数据库的易用性和健壮性,一个设计合理且一致的类型......
  • 前端不缓存,ajax不缓存,js操作cookie
    前端不缓存,ajax不缓存,js操作cookie 今天实现网站注销功能时,需要清除cookie缓存,开始在网上搜索的是“js清除缓存”,发现很多都是预先防患缓存存储的内容,千篇一律,不过也......
  • SpringMVC响应Ajax请求
    在分享今天的这个知识点之前先回顾一下使用ajax的目的:实现异步请求,客户端发送的请求携带数据到达服务器,服务器接收到请求后进行处理,然后返回处理后的数据。客户端接收到返......
  • 了解神经 ODE (AI)
    了解神经ODE(AI)PhotobyArteum.roon不飞溅使用多项式系统嵌入的递归神经ODE的实现理论(arXiv)作者:马丁冈萨雷斯,蒂博·德福尔诺,哈特姆哈吉里,......
  • 你需要了解多少 Javascript 才能开始使用 React?
    你需要了解多少Javascript才能开始使用React?1.Javascript基础一个。使用var、let和const进行变量声明湾。算术、比较、逻辑运算符C。条件块和循环:if、for、f......