ajaxWebStageDay17

本文深入讲解了Ajax(异步JavaScript和XML)的概念及其在网页应用中的作用,包括局部刷新、数据验证、内容自动补全等场景。同时,对比了同步与异步请求的区别,并详细介绍了原生JS和jQuery实现Ajax的方法。此外,还解析了JSON数据格式及其在数据交换中的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.Ajax: 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开
发技术。

1)异步的javascript和xml技术

2)目的:
	可以在我们不刷新整个页面的前提下 就可以给服务器交互  局部刷新

3)应用场景:
	检查用户名是否已经被注册(数据验证工作)
	省市二联下拉框联动
	内容自动补全
	地图应用
	...

2.同步异步的区别:
异步:发送一个请求,不需要等待响应返回,随时可以再发送下一个请求,即不需要等待。

同步:发送一个请求,需要等待响应返回,然后才能够发送下一个请求,如果该请求没有响应,
     不能发送下一个请求,客户端会处于一直等待过程中。

3.原生js的api方法:

1)创建核心引擎对象
2)告知引擎对象 你帮我请求服务器 告知服务器返回数据 应该做啥
3)告知引擎对象 请求的地址和参数
4)告知引擎对象 发请求

当引擎对象的状态 为
if(xmlhttp.readyState ==4&&xmlhttp.status==200){
	
}
属性:
responseText:服务器返回的文本内容

4.jquery封装好的 发ajax的方式

4.1. $.get(url,params,fn,type);
1.2. $.post(url,params,fn,type);

参数解释:
1)url: 请求的服务器端url地址
2)params: 发送给服务器端的请求参数,格式可以是key=value,也可以是js对象
3)callback(fn): 当请求成功后的回掉函数,可以在函数体中编写我们的逻辑代码
	function(data,statuscode,xhr){
		data://服务器返回数据
		statuscode:jquery对于状态码的解释
		xhr:底层的那个核心引擎对象
	}
4)type:预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defaul等
	默认值jquery 自己设置--> json或其它


4.3. $.ajax({
	url:请求服务器地址
	dataType:===>type:暂且不表
	data:发送服务器数据
	type:get|post
	success:function(){
		成功请求
	},
	error:function(){
		错误逻辑处理
	}
})

5.JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集,
采用完全独立于编程语言的文本格式来存储和表示数据。

json的转换工具: 通过java封装好的一些jar工具包,直接将java对象或集合转换成json格式的字符串。
常用: java
apache-->jsonlib
阿里-->fastjson
google-->gson

今日学习: jsonlib(第三方)

	JsonObject.fromObejct(map|javaBean)

	JsonArray.fromObejct(arr|list|set)

案例一: 验证用户名是否可用:

在用户注册页面,输入用户名,当用户名输入框失去焦点时,发送异步请求,将输入框的用户名传递给服务器端进行是否存在的校验。

1.首先在注册页面 给用户名输入框绑定丢失焦点事件
2.发请求,当前输入框内容发送服务器,服务器根据参数 数据库查询是否可用
	可用:1
	不可用:0
3.前端页面根据返回1 还是0 做出对应的提示效果

准备:
1.数据库:初始化
2.创建工程
	导入jar包
	导入工具包
	导入配置文件
	创建三层结构

3.技术:json(一种数据交换格式)

格式一:对象形式的
	属性名必须是字符串  属性值没有类型限制
	var json1={
			属性名:属性值,
			属性名:属性值,
			......//最后一个没有逗号
		}

格式二:数组形式
	元素没有类型限制
	var json2=[ele1,ele2,ele3.....]

格式三:混合类型
	[{},{}... ...] 或 {name:[]... ...} 
	合理包裹嵌套对象类型和数组类型

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值