Ajax

最新推荐文章于 2024-10-13 17:08:38 发布
最新推荐文章于 2024-10-13 17:08:38 发布
阅读量134 收藏
点赞数 2
文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/db19981999/article/details/104993001
版权

获取Ajax对象

  • XMLHttpRequest 对象:
    我们写一个函数来创建，以后每次调用它就行：
function getAjax(){
	if(XMLHttpRequest){		
		return new (XMLHttpRequest);		//代表非IE浏览器
	}else if(ActiveXObject){
		return new ActiveObject("Microsoft.XMLHTTP");//IE浏览器
	}else{
		alert("no server..");
	}
}

调用的时候运用到open和send方法：

var xhr=getAjax();
	xhr.open("get","/Web_/getTime",true);//第一个是请求方式，第二个是文件访问位置（我这里是我servlet提交的位置）第三个“true”表示异步，false是同步
	xhr.send();//向后台发送请求

服务器响应：

  • responseText： 获得字符串形式的响应数据（因为是很多时候我们使用异步，这样网页加载快，就不一定会按正常流程获得数据，因为不知道它什么时候执行完，所以我们使用监听器监听其状态）
  • code:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
function getAjax(){
	if(XMLHttpRequest){
		return new (XMLHttpRequest);
	}else if(ActiveXObject){
		return new ActiveObject("Microsoft.XMLHTTP");
	}else{
		alert("no server..");
	}
}
function getTime(){
	var xhr=getAjax();
	xhr.open("get","/Web_/getTime",true);
	xhr.send();//向后台发送请求
	
	xhr.onreadystatechange=function(){  //用监听器监听
		if(xhr.readyState==4){    //代表数据接收完毕
			console.debug(xhr.responseText);//在控制台显示后台返回的响应数据
			}
	}
	}
	
</script>
</head>
<body>
<button onclick="getTime()">click me</button>
</body>
</html>

使用JSON传递数据：

  • JSON 比 XML 更小、更快，更易解析，
    创建方式，code:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<p>
Name: <span id="jname"></span><br />
Age: <span id="jage"></span><br />

</p>

<script type="text/javascript">
var JSONObject= {   
"name":"Bill Gates",
"age":56};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jage").innerHTML=JSONObject.age
/*
JSON_1.age=20;//还可以修改属性
document.getElementById("jage").innerHTML=JSON_1.age
*/

</script>
</body>
</html>

后台很多时候传过来的是字符串的形式，但是字符串不能作为代码来执行，所以有时候我们要把字符串转换成可执行的脚本：
code:

//两种方式
var JSON_2='{"name":"steve","age":22}'//这个只是个字符串，但是格式符合JOSN
//console.debug(eval("("+JSON_2+")"));
console.debug(JSON.parse(JSON_2));
一杯甜咖啡
关注
ajax
huangyh技术栈
09-28 3万+
1.1 什么是ajax: Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新...
ajax删除DB数据
weixin_30748995的博客
01-20 57
1.前台js 1 $().ready(function () { 2 3 $('[name="checkAll"]').click(function () { 4 if ("checked" == $('input[name="checkAll"]').attr("checked")) { 5 $('input[...
通过Ajax从数据库中获取数据
jiaofagang的专栏
05-29 2万+
后台：Test01.ashx.cs:从数据库获取数据，通过HTTP请求（HttpContext）实现和前台数据传递json数据using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data.SqlClient; using System.Data; usin...
看这一篇就够了！-Ajax详解
Oriental_的博客
03-15 17万+
今天来聊一聊前后端交互的重要工具Ajax 结合上次跟大家分享的前后端交互基础，如果还没有看过的童鞋，以下是传送门 前后端交互详解 AJAX - 到底什么是Ajax? ajax 全名 async javascript and XML 是前后台交互的能⼒ 也就是我们`客户端给服务端发送消息的⼯具，以及接受响应的⼯具 是⼀个 默认异步执⾏机制的功能AJAX分为同步（async = false...
Ajax请求的五个步骤
热门推荐
chaopingyao的博客
06-02 17万+
Ajax请求的五个步骤 一、定义 1、什么是Ajax Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。 2、同步与异步的区别 同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。 异步提交：当用户发送请
AJAX 详解
06-19 2万+
Ajax基础知识，及常见问题详解
AJAX简介
xpmhhh的博客
03-20 6902
AJAX: 全称Asynchronous JavaScript And XML，即异步JS和XML。 通过AJAX可以在浏览器中向服务器发送异步请求。 最大的优势：无刷新的获取数据。 Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 XML: 可扩展标记语言，被设计用来传输和存储数据。 与HTML的区别：HTML中都是预定义的标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。 以前Ajax是用XML格式的字符串进行数据交换，现在已经被JSON取代了。
Ajax请求
weixin_45030426的博客
03-25 1万+
ajax请求简介： ajax是利用前端的技术，向服务器发送一个异步请求 原有的请求在请求后需要刷新整张页面，
AJAX
风间琉璃の博客
08-04 4071
AJAX AJAX 不是一种新的编程语言而是一种使用现有标准的新方法，与服务器交换数据并更新部分网页的新技术（不用重新加载整个界面）。 AJAX = 异步JavaScript和xml。 1.创建AJAX对象 XMLHttpRequest 对象用于在后台与服务器交换数据 var xhr = new XMLHttpRequest(); 老版本的ie var xhr = new ActiveXObj...
Ajax从入门到精通.pdf
05-09
Ajax从入门到精通.pdf 本书籍旨在深入浅出地介绍 Ajax 技术，从基础知识到高级应用，全面覆盖 Ajax 的核心概念、技术原理、实现方法和实践应用。书籍的主要内容包括： 1. Ajax 概述：本书首先介绍了 Ajax 的概念、...
谷歌浏览器插件—— Ajax Interceptor
03-16
**Ajax Interceptor：深入理解与应用** Ajax Interceptor 是一款专为谷歌浏览器（Chrome）设计的插件，它允许开发者在Ajax请求发送后和响应返回前进行干预，从而实现对AJAX请求数据的修改。这款插件对于前端开发、...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
C# 如何使用ajax请求
08-18
C# 如何使用ajax请求 C# 使用ajax请求是指在C# 项目中使用ajax技术来实现异步更新网页的内容。ajax即“Asynchronous Javascript And XML”（异步JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页...
jQuery 中的 Ajax 详解
zz130428的博客
10-12 648
众所周知，jQuery 是一个跨主流浏览器的 JavaScript 库，它封装了 JavaScript 的常用功能代码，简化了 HTML DOM 操作、事件处理、动画设计和 Ajax 交互等任务。jQuery 中的 Ajax 是对 XMLHttpRequest 或 ActiveXObject（IE9以下版本中）的封装，它提供了一种更加方便和强大的方式来与服务器进行数据交换，从而实现在不重新加载整个页面的情况下，对网页进行局部更新。
ajax嵌套ajax实现不刷新表单并向指定页面二次提交数据
2302_79553009的博客
10-13 132
利用jq定位表单位置后执行阻止表单提交代码。当获取到表单数据后进行向指定页面提交操作。提交成功后将表单置空且再次利用ajax提交该表单完成二次提交。
JavaWeb 19 AJAX
最新发布
m0_73983707的博客
10-13 184
AJAX =异步的JavaScript和XML)AJAX不是新的编程语言，而是一种使用现有标准的新方法;AJAX最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容;AJAX不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行;只是实现 Ajax 的一种方式;
使用axios封装AJAX
LvManBa的博客
10-06 1003
一 、Http 请求报文 包括了三部分： 求情行、请求头，请求体。 1、请求行： 是HTTP请求的第一行，包含了请求方法、请求目标和HTTP协议版本。常用的请求方法有GET、POST、PUT、DELETE等，用于指定客户端希望服务器执行的操作。请求目标是指请求的资源路径，可以是一个具体的文件路径或者是一个URL。HTTP协议版本通常是HTTP/1.1。 请求类型： 2、请求头： 请求头包含了客户端向服务器传递的额外信息，以键值对的形式表示。常见的请求头有以下几种：请求头可以包含多个。 Host：指定服
Ajax到JQuery Ajax学习指南
"这篇教程主要关注的是从基本的Ajax技术过渡到使用JQuery的Ajax功能的学习。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器交换数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值