IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> jQuery-Ajax -> 正文阅读

[JavaScript知识库]jQuery-Ajax

Ajax


简介

  • AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML)。xml:一种数据格式
  • Ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术
  • Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
  • Ajax的核心是XMLHttpRequest对象,XHR会向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
  • 包含的技术主要有javascript、dom、css、xml等等。核心是javascript和xml
  • javascript:负责创建异步对象,发送请求,更新页面的dom对象。请求需要服务器的数据
  • xml:网络中传输的数据格式。现json代替了xml。

全局刷新和局部刷新

全局刷新:整个浏览器被新的数据覆盖。在网络中传输大量的数据,浏览器需要加载,渲染整个页面。
局部刷新:在浏览器的内部,发起请求,获取数据,改变页面中的部分内容。其余页面内容无需加载和渲染。数据传输量少。

  • ajax就是用来做局部刷新的。核心就是局部刷新

异步对象

在这里插入图片描述

  • 1):异步对象: XMLHttpRequest(ajax的核心对象)。
    存在浏览器内存中,使用javascript语法来创建和使用XMLHttpRequest对象

  • 2):ajax实现局部刷新的一种技术

  • 3): 异步对象可以代替浏览器的行为,由异步对象来发送请求,异步对象获取数据,在浏览器的内存中,我们可以创建多个异步对象,每一个异步对象都可以发请求和获取数据

  • 4): 创建XMLHttpRequest对象的语法:

    var xmlhttp= new XMLHttpRequest();
    

创建异步对象

  • 1): 创建异步对象 var xmlhttp = new XMLHttpRequest();

  • 2): onreadstatechange事件:给异步对象绑定事件(btn.οnclick=fun1())。这个事件可以知道异步对象是在发请求还是接收数据。这个事件需要指定一个函数,在函数中处理状态的变化

      例如:
      xmlhttp.onreadstatechange= function (){
      		处理请求的状态变化。
      		if(xmlHttp.readState == 4 &&  xnlHttp.status == 200){
      			//可以处理服务器中的数据,局部更新当前页面
      			var data = xmlHttp.responseText;
      			document.getElementById("name").value=data;
      		}
      }
    
  • 异步对象的属性readState 表示异步对象请求的状态变化

      readState属性:
      0:请求未初始化,创建异步请求对象 var xmlhttp = new XMLHttpRequest() 
      1:初始化异步请求对象,xmlHttp.open(请求方式,请求地址,true)
      2:异步对象发送请求,xmlHttp.send()
      3:异步对象接受应答数据,从服务器返回数据。XMLHttpRequest内部处理
      4:异步请求对象已经将数据解析完毕。此时才可以读取数据
    
  • 异步对象的status属性,表示网络请求的状况的,请求成功返回200,访问失败:404,服务器代码出错:500。需要时status==200,表示网络请求是成功的。

  • 3):初始异步请求对象,异步对象的方法open():xmlHttp.open(请求方式gey/post,“服务器端的访问地址”,同步/异步请求(默认是true,异步请求))

      例如:
      xmlHttp.open("get","loginServlet?name=zhangsan & pwd=123",true)
    
  • 4):使用异步对象发送请求,xmlHttp.send();

  • 获取服务器端返回的数据,使用异步对象的属性 responseText

      例如:xmlHttp.responseText
    

Ajax计算BML状态变化

在这里插入图片描述在这里插入图片描述首先:给按钮设置一个点击事件,当我们点击时就会触发这个函数。
xmlHttp.open(“get”, “testAjax”, true);:可以看成一个提交方式“get”:get方式提交
“testAjax”:控制层的url地址
“true”:异步请求
注:只有xmlHttp.readyState == 4时,我们才能读取到数据

在这里插入图片描述如图,我们使用了响应对象response并输出了helloAjax,所以请求中的相应也会有相应字符,
alert(xmlHttp.responseText):拿到的数据并给它弹出

Ajax计算BML控制层接收数据

在这里插入图片描述

在这里插入图片描述前端想把数据发送给控制层就必须要拿到相应的值
var width=document.getElementById(“width”).value;:获取id为width的值

因为我们是使用get方式提交,使用就必须按照它的格式来:

get提交格式:http://localhost:8080/ProjectTest1/testAjax?width=68&height=1.8

所以我们需要它们拼接起来,并在url地址中传输,不然就会报500的错

在这里插入图片描述我们在控制层输出msg字符串,这里我们看到,它网络中响应的字符串是:你的BMI值是:20.987656您的体质:偏瘦

alert(xmlHttp.responseText);我们在控制层输出了msg,那么这里拿到的数据也就是msg,所以它也会弹出相应字符串

Ajax计算BML前端接收数据并展示

在这里插入图片描述在这里插入图片描述当前端接收数据,并更新当前页面时,可以看到只是局部的更新页面,其他页面内容并没有发生改变,只有div标签里的内容发生了改变,它原本的内容应是:等待更新数据!

json介绍

json分类:

  • json对象,jsonobject,这种对象的格式 名称:值 ,也可以看作是 key:value

      例如:
      {name:"河北",jiancheng : "冀",shenghui:"石家庄"}
    
  • json数组,jsonArray,基本格式 [{对象1},{对象2}]

      例如
      [ {name:"河北",jiancheng : "冀",shenghui:"石家庄"} , {name:"山西",jiancheng : "晋",shenghui:"太原"}]
    

优点:

  • json格式好理解
  • json格式数据在多种语言中比较容易处理。
  • json格式数据占用空间小,传输快

小实例

按id查询所有信息:
在这里插入图片描述在这里插入图片描述在这里插入图片描述我们要把一个对象转输给前端时,要先把它转换为json格式的字符串:

	String result= new ObjectMapper().writeValueAsString(project);
	转换之后是一个字符串,所以我们需要定义一个String来接收

我们在第三张图也可以看到,响应对象输出的是json格式的字符串
并且它的键是实体类中的属性名,值是属性名所对应的值

当前端接收json数据时,它是一个字符串,所以要将ta解析成json对象

	//eval是执行括号中的代码,将json字符转为json对象
		var jsonobj =eval("("+xmlHttp.responseText+")");

这样jsonobj就是一个json对象,然后就可以局部更新当前页面

	//jsonobj.project_name:json字符串中的键,实体类的属性名。通过这个来拿到属性名相对应的值
			document.getElementById("project_name").value = jsonobj.project_name;

post方式提交数据

如需像 HTML 表单那样 POST 数据,请通过 setRequestHeader() 添加一个 HTTP 头部。
然后在 send() 方法中规定您需要发送的数据:
在这里插入图片描述

		//获取值
		var id= document.getElementById("project_id").value;
		//拼接
		var param ="id="+id;
		xmlHttp.open("post","TestAjax1",true);
		//通过 setRequestHeader() 添加一个 HTTP 头部
		xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
	//4.发生请求,请求里规定发送的数据
	xmlHttp.send(param);

IE对于Ajax的兼容问题

当你使用Ajax提交数据时,如果你第二次提交的地址与第一次提交的地址相同时,IE会默认返回第一次地址中响应的值,就不会再次进入到这个地址拿值。

怎样解决兼容问题呢?

		//1.获取实时时间
		xmlHttp.open("get","TestAjax1?t="+(new Date().getTime()),true);
		//2.获取随机数
		xmlHttp.open("get","TestAjax1?t="+(Math.random()),true);

这样每次提交的地址就都不同了!

jQuery封装过的Ajax

以下是Ajax的常用属性:
在这里插入图片描述注:

  • 如果不指定dataType属性,jquery会自动判断其数据类型

  • 使用jQuery封装过的Ajax必须要先导入jquery文件

      <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    

更简洁的Ajax

$.pos方法
在这里插入图片描述
$.post({}):把type属性设置为post方式提交

$.get方法
在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-09-12 13:04:57  更:2021-09-12 13:05:39 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 16:41:16-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码