Ajax和JqueryAjax

最新推荐文章于 2024-07-29 20:46:57 发布
最新推荐文章于 2024-07-29 20:46:57 发布
阅读量194 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhujunyu0814/article/details/89483259
版权

Ajax
一、Ajax请求
1.异步无刷新技术
实现流程：
同步：
1）、得到核心对象XMLHttpRequest对象
var xhr = new XMLHttpRequest();
console.log(xhr);

  2）、准备/打开请求
     open(请求类型GET/POST,请求的路径,是否异步true/false);

xhr.open(“GET”,“js/data.json?uname=zhangsan&uage=10”,false); // 同步请求

  3）、发送请求
     send(参数/null);
     xhr.send(null);
     注：如果是get请求，参数直接跟在请求路径后面，      	send()方法中设置null;
     如果是post请求，有参数则设置参数，无参数设置为null;
     4）、解析响应数据
     1>、判断响应是否成功 status=200 （404=未找到资源;500=服务器异常;200=成功）
  if (xhr.status == 200) { // 1、判断响应是否成功 status=200
     2>、得到后台响应数据  responseText
      console.log(xhr.responseText);
       var user = JSON.parse(xhr.responseText);
       console.log(user);
       console.log(user.uname);
       } else {
       alert("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);
        }

2.异步
1）、得到核心对象XMLHttpRequest对象
var xhr = new XMLHttpRequest();
console.log(xhr);

  2）、准备/打开请求
     open(请求类型GET/POST,请求的路径,是否异步true/false);

xhr.open(“GET”,“js/data.json?uname=zhangsan&uage=10”,false); // 同步请求

  3）、发送请求
     send(参数/null);
     xhr.send(null);

注：如果是get请求，参数直接跟在请求路径后面，send()方法中设置null;
如果是post请求，有参数则设置参数，无参数设置为null;

// 监听readystate事件 （0=尚未调用open方法；1=已调用open方法未调用send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完全接收）
xhr.onreadystatechange = function() {
// 如果是异步请求，需要等待数据完全响应后再做处理
if (xhr.readyState == 4) {
4）、解析响应数据
1>、判断响应是否成功 status=200 （404=未找到资源;500=服务器异常;200=成功）
if (xhr.status == 200) { // 1、判断响应是否成功 status=200

     2>、得到后台响应数据  responseText
      console.log(xhr.responseText);
        var user = JSON.parse(xhr.responseText);
        console.log(user);
        console.log(user.uname);
         } else {
         alert("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);
        }
}
}

3.post请求
实现流程：
异步：
1)得到核心对象XMLHttpRequest对象
var xhr = new XMLHttpRequest();
console.log(xhr);
2)准备/打开请求
open(请求类型GET/POST,请求的路径,是否异步true/false);
xhr.open(“POST”,“js/data.json”,true); // 异步请求
// 由于Post请求的机制问题，需要模拟表单提交 xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’);
3)发送请求
send(参数/null);
注：如果是get请求，参数直接跟在请求路径后面，send()方法中设置null;
果是post请求，有参数则设置参数，无参数设置为null;
xhr.send(“uname=zhangsan&uage=10”); // post请求如果有参数，需 要将参数设置在send方法中

	// 监听readystate事件 （0=尚未调用open方法；1=已调用open方法未调用			send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完			全接收）
		xhr.onreadystatechange = function() {
		// 如果是异步请求，需要等待数据完全响应后再做处理
		if (xhr.readyState == 4) {

4)解析响应数据
①　判断响应是否成功 status=200 （404=未找到资源;500=服务器异常;200=成功）
if (xhr.status == 200) {
②　得到后台响应数据 responseText

console.log(xhr.responseText);
					var user = JSON.parse(xhr.responseText);
					console.log(user);
					console.log(user.uname);
				} else {
					console.log("失败状态码：" + xhr.status + "，失败原因：" 					+ xhr.statusText);
				}
			}
		}

4.ajax封装
实现流程：
1、得到核心对象XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2、准备/打开请求
open(请求类型GET/POST,请求的路径,是否异步true/false);
3、发送请求
send(参数/null);
注：如果是get请求，参数直接跟在请求路径后面，send()方法中设置null;
如果是post请求，有参数则设置参数，无参数设置为null;
4、解析响应数据
1、判断响应是否成功 status=200 （404=未找到资源;500=服务器异常;200=成 功）
2、得到后台响应数据 responseText



   /*将对象格式的参数转换成等号拼接的字符串*/
   function formatParam(data) {
      // 判断参数是否存在
      if (data == null) {
         return "";
      }
      // 定义数组，接收每个参数字符串
      var params = [];
      for(var key in data) {
         /* console.log(key);
         console.log(data[key]);
         console.log(key+"="+data[key]) */
         // js中通过push()方法向数组的最后追加
         params.push(key+"="+data[key]);
      }
      console.log(params.join("&"));
      var param = params.join("&");// uname=zhangsan&uage=18     
      return param;
   }
</script>

JqueryAjax
1.jquery调用ajax方法：
格式：$.ajax({});
参数：
type：请求方式GET/POST
url：请求地址url
async：是否异步，默认是true表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数

<script type="text/javascript" src="js/jquery-3.3.0.min.js"></script>
<script type="text/javascript">
	$.ajax({
		type:"get", // 请求类型 GET/POST
		url:"js/data.json", // 请求路径
		dataType:"json", // 预期服务器返回的数据类型 
		data:{ // 请求参数，键值对的json对象
			
		},
		success:function(data){ // 请求成功时的回调函数
			console.log(data);
		}
	});
	
	$.ajax({
		type:"post", // 请求类型 GET/POST
		url:"js/data.json", // 请求路径
		dataType:"json", // 预期服务器返回的数据类型 
		data:{ // 请求参数，键值对的json对象
			
		},
		success:function(data){ // 请求成功时的回调函数
			console.log(data);
		}
	});

</script>

2.get（）查询的时候用
1.请求json文件，忽略返回值
$.get(’…/js/cuisine_area.json’);
2.请求json文件，传递参数，忽略返回值
$.get(’…/js/cuisine_area.json’,{name:“tom”,age:100});
3.请求json文件,拿到返回值,请求成功后可拿到返回值
$.get(’…/js/cuisine_area.json’,function(data){
console.log(data)
});
4.请求json文件,传递参数,拿到返回值
$.get(’…/js/cuisine_area.json’,{name:“tom”,age:100},function(data){
console.log(data)
});

<script type="text/javascript" src="js/jquery-3.3.0.min.js"></script>
<script type="text/javascript">
	/* 无参数，无返回值 */
	// $.get("http://localhost:8080/jqueryAjax/ServletTest");
	/* 有参数，无返回值 */
	// $.get("http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan"});	
	/* 无参数，有返回值 */
	/* $.get("http://localhost:8080/jqueryAjax/ServletTest",function(data){
		console.log(data);
	}); */
	/* 有参数，有返回值 */
	/* $.get("http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan"},function(data){
		console.log(data);
	}); */
	$.get("js/data.json",{},function(data){
		console.log(data);
	});

</script>

3.post（）慢 提交或登录的时候用
1.请求json文件，忽略返回值
$.get(’…/js/cuisine_area.json’);
2.请求json文件，传递参数，忽略返回值
$.get(’…/js/cuisine_area.json’,{name:“tom”,age:100});
3.请求json文件,拿到返回值,请求成功后可拿到返回值
$.get(’…/js/cuisine_area.json’,function(data){
console.log(data)
});
4.请求json文件,传递参数,拿到返回值
$.get(’…/js/cuisine_area.json’,{name:“tom”,age:100},function(data){
console.log(data)
});

<script type="text/javascript" src="js/jquery-3.3.0.min.js"></script>
<script type="text/javascript">
	/* 无参数，无返回值 */
	// $.get("http://localhost:8080/jqueryAjax/ServletTest");
	
	/* 有参数，无返回值 */
	// $.get("http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan"});
	
	/* 无参数，有返回值 */
	/* $.get("http://localhost:8080/jqueryAjax/ServletTest",function(data){
		console.log(data);
	}); */
	
	/* 有参数，有返回值 */
	/* $.get("http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan"},function(data){
		console.log(data);
	}); */
	
	
	$.get("js/data.json",{},function(data){
		console.log(data);
	});

</script>

4.getjson（）自动封装

<script type="text/javascript" src="js/jquery-3.3.0.min.js"></script>
<script type="text/javascript">	
	$.getJSON("http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan"},function(data){
		console.log(data);
	}); 
	$.get("http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan"},function(data){
		console.log(data);
	}); 
</script>
柑橘栀子花0814
关注
Ajax和jQuery
weixin_56341892的博客
04-09 4343
Ajax和jQuery 一、Ajax 1、Ajax概述 ajax：Asynchronous JavaScript and XML（Asynchronous：异步的 JavaScript 和 XML）。 Asynchronous: 异步的意思 JavaScript：javascript脚本，在浏览器中执行 xml : 是一种数据格式 ajax是一种做局部刷新的方法，不是一种语言。 是浏览器客户端上的前端技术，是多个技术联合实现的产物。 ajax包含的技术主要有javascript，dom，css,，x
Ajax与jQuery
yananye的博客
03-29 346
认识Ajax 在传统的Web应用中，每次请求服务器都会生成新的页面，用户在提交请求后，总是要等待服务器的响应。如果前一个请求没有得到响应，则后一个请求就不能发送。由于这是一种独占式的请求，因此如果服务器响应没有结束，用户就只能等待或者不断刷新页面。在等待期间，由于新的页面没有生成，整个浏览器一片空白，而用户只能继续等待。对于用户而言，这是一种不连续的体验，同时，不断的刷新页面也会使服务器的负担加重。 Ajax技术正是为了弥补以上不足在诞生的，Ajax应用在使用javaScript异步发送请求，不用每次请求都
AJAX和Jquery
qq_50794782的博客
03-30 1602
目录 一、什么是Ajax 二、工作原理 三、AJAX如何实现 一、JQuery简介 一、什么是Ajax Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和xml。也就是异步请求更新技术。Ajax是一种对现有技术的一种新的应用，不是一门新语言。它是用JavaScript编写。 二、工作原理 XMLHttpRequest 对象的常用属性 属性 描述 onreadystatechange 定义当ready..
jQuery中的Ajax
最新发布
weixin_68489989的博客
07-29 519
jQuery中的Ajax
Ajax和JQuery
捌椒的博客
09-18 2399
是什么?javascript 的代码框架。有什么用?简化代码，提高效率。核心write less do more , 写得更少，做的更多。
Ajax与JQuery
lee
10-29 161
Ajax 1、ajax是什么? asynchronous javascript and xml:异步的javascript和xml。 是一种用来改善用户体验的技术，其本质是利用浏览器内置的一种特殊的对象(XMLHttpRequest)异步(即发送请求时，浏览器不会销毁当前页面，用户可以继续在当前页面做其它的操作)的向服务器发送请求,并且利用服务器返回的数据(不再是一个完整的页面，只是部分的...
原生Ajax 和jQuery Ajax的区别示例分析
10-25
原生Ajax和jQuery Ajax都是前端开发中用于与服务器进行异步数据交换的技术，但它们在实现方式和使用便利性上存在明显差异。以下是对这两者区别的详细分析： ### 原生Ajax基础 原生Ajax是通过使用浏览器提供的...
原生Aajax 和jQuery Ajax 写法个人总结
10-20
AJAX:即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。本文重点给大家介绍原生Aajax 和jQuery Ajax 个人总结，一起看看吧
传统Ajax和JqueryAjax操作Json对比案例
08-10
本案例主要对比了传统Ajax和JqueryAjax在处理JSON数据时的区别和用法，这对于理解和优化Web应用的交互体验至关重要。 1. **传统Ajax操作JSON** 传统Ajax操作JSON通常涉及到以下几个步骤： - 创建XMLHttpRequest...
AJAX与jQuery
ddccaaxXasac的博客
08-23 590
无刷新技术：刷新页面不跳转，在当前页面刷新，是局部的刷新。例如：地图的缩放和移动都是在当前页面完成的，没有刷新整个页面。
AJAX和JQuery
小符的博客
06-04 530
AJAX和JQuery 今日任务 Ø 使用AJAX完成用户名的异步校验 Ø 使用JQuery完成用户名异步校验 Ø 使用JQuery完成商品信息模糊显示 Ø 使用JQuery完成省市联动效果返回JSON 教学导航 教学目标 了解AJAX的基本使用 掌握JQuery的AJAX部分的代码 掌握JQuery返回JSON格式数据如何处理 教学方
JQuery AJAX
hhan_bj的博客
01-27 1302
1. ajax
jQuery ajax
JustinNeil的博客
06-20 549
简介 ajax 就是异步的javascript和xml，通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 原生JS实现AJAX var request = new XMLHttpRequest();　　//创建XMLHttpRequest()对象 //启动一个HTTP请求，但未发送请求到服务端，最后一个参数默...
jQuery 与 Ajax
Wzc0720的博客
10-28 3868
可以在不重新加载整个网页的情况下，对网页的某部分进行更新。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。简单说是需要连接数据库的地方，但是连接数据库传输的信息量很少，用不着刷新整个页面，这。简单说是需要连接数据库的地方，但是连接数据库传输的信息量很少，用不着刷新整个页面，这。减轻服务器的负担，按需取数，可以最大程度的减少冗余请求和响应对服务造成的负担。减轻服务器的负担，按需取数，可以最大程度的减少冗余请求和响应对服务造成的负担。种类型的适合用 ajax，避免了属性整个页面带来的资源浪费。
jquery中的ajax
weixin_44740410的博客
04-24 1009
jquery的get()和post()方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="jquer...
11.Ajax与jQuery
kxindouhao5491的博客
11-01 1464
Ajax 为什么使用Ajax? 无刷新：不刷新整个页面，只刷新局部 无刷新的好处 只更新部分页面，有效利用带宽 提供连续的用户体验 提供类似C/S的交互效果，操作更方便   Ajax与jQuery 问题分析1：整体开发思路 系统开发步骤 问题分析2：界面交互设计 界面交互设计的原则 问题分析3：技术分析 技术实现中需要考虑的问题 采用...
Ajax与jQuery的介绍和简单使用（一）
雪落无痕的博客
09-06 752
Ajax与jQuery认识AjaxAjax简介XMLHttpRequest1.创建XMLHttpRequest对象2.XMLHttpRequest对象常用属性和方法使用Ajax发送Get请求即处理响应使用Ajax 发送POST请求及处理响应 认识Ajax 互联网的发展，基于B/S架构的Web应用程序越来越受推崇。但是b/s的架构的应用在界面效果及操控的方面比C/S的应用程序差很多，这也是Web应用程序普通存在一个问题。 Ajax就是为了弥补频发刷新界面导致浏览器一片空白的不足而诞生的。Ajax应用使用Jav
jsajax和jqueryajax的区别
09-16
js中的ajax和jQuery中的ajax实质上是相同的技术，它们都是用来进行前后端交互的。主要区别在于使用的方法和语法上略有不同。 1. js中的ajax：在纯粹的JavaScript中，可以使用XMLHttpRequest对象来进行ajax操作。这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值