Ajax 基础入门

最新推荐文章于 2024-09-12 10:00:34 发布
最新推荐文章于 2024-09-12 10:00:34 发布
阅读量7.4k 收藏
点赞数
分类专栏： SSM 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43914658/article/details/112815938
版权

Ajax简介

Ajax即Asynchronous JavaScript And XML(异步的JavaScript和XML) 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。Ajax的核心对象就是xmlHttpRequest，XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，而重定向和请求转发都是需要加载整个网页，因此使用Ajax技术能获得更好的用户体验。

原生Ajax方式实现：

视图层：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax技术基础</title>

<script type = "text/javascript">
	window.onload = function(){ 
		// 获取目标的对象
		var divobj = document.getElementById("mydiv");
		// 定义对象函数
		divobj.onclick = function(){
			//1 . 创建异步对象
			var xhr = new XMLHttpRequest();
			//2. 绑定事件
			xhr.onreadystatechange = function(){
				// console.log("请求状态为："+xhr.readyState);
				// console.log("服务器端响应状态为"+xhr.status);
				if(xhr.readyState == 4 && xhr.status == 200){
					//处理返回数据 可以更新DOM对象
					var data  = xhr.responseText; // 获取对象
					// alert("Ajax收到的信息为："+data);
					var divobj = document.getElementById("mydiv"); // 局部变量
					divobj.innerHTML = data; // 嵌入数据
				}
			}
			//4. 初始请求参数
			xhr.open("get","AjaxTest",true);
			//5. 发起请求
			xhr.send();
		}
	}
</script>
</head>
<body>
	<div id = "mydiv" align = "center" style = "color:red"><h1>点击这</h1></div>
</body>
</html>

采用jQuery方式使用Ajax技术：

环境：spring+springMVC+Mybatis
结构：
在这里插入图片描述

pom.xml:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.wu.ajax</groupId>
  <artifactId>AjaxDemo1</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  
  <!--  版本锁定 -->
  <properties>
  	<springVersion>5.2.0.RELEASE</springVersion>
  </properties>
  
  <!--  坐标导入 -->
  <dependencies>
  	<dependency>
  		<groupId>org.springframework</groupId>
  		<artifactId>spring-context</artifactId>
  		<version>${springVersion}</version>
  	</dependency>
  	<dependency>
  		<groupId>org.springframework</groupId>
  		<artifactId>spring-webmvc</artifactId>
  		<version>${springVersion}</version>
  	</dependency>
  	<dependency>
  		<groupId>org.springframework</groupId>
    	<artifactId>spring-jdbc</artifactId>
    	<version>${springVersion}</version>
  	</dependency>
  	
  	<dependency>
  		<groupId>junit</groupId>
  		<artifactId>junit</artifactId>
  		<version>4.12</version>
  	</dependency>
  	<dependency>
  		<groupId>org.mybatis</groupId>
		  <artifactId>mybatis</artifactId>
		  <version>3.5.2</version>
  	</dependency>
  	<dependency>
  		<groupId>javax.servlet</groupId>
	    <artifactId>javax.servlet-api</artifactId>
	    <version>4.0.1</version>
  	</dependency>
  	<dependency>
  		<groupId>javax.servlet</groupId>
  		<artifactId>jstl</artifactId>
  		<version>1.2</version>
  	</dependency>
  	<dependency>
  		<groupId>org.mybatis</groupId>
    	<artifactId>mybatis-spring</artifactId>
    	<version>1.3.2</version>
  	</dependency>
  <dependency>
  		<groupId>mysql</groupId>
    	<artifactId>mysql-connector-java</artifactId>
    	<version>8.0.22</version>
  	</dependency>
  <dependency>
  		<groupId>taglibs</groupId>
    	<artifactId>standard</artifactId>
    	<version>1.1.2</version>
  	</dependency>
  	<dependency>
  		<groupId>org.aspectj</groupId>
  		<artifactId>aspectjweaver</artifactId>
  		<version>1.9.0</version>
  	</dependency>
  	<dependency>
  		<!--  数据库连接池 -->
  		<groupId>com.mchange</groupId>
    	<artifactId>c3p0</artifactId>
    	<version>0.9.5.5</version>
  	</dependency>
  	<dependency>
  		<groupId>com.fasterxml.jackson.core</groupId>
    	<artifactId>jackson-databind</artifactId>
    	<version>2.12.0</version>
</dependency>
<dependency>
	  	<groupId>log4j</groupId>
	  	<artifactId>log4j</artifactId>
	  	<version>1.2.17</version>
	  </dependency>
  </dependencies>
  
</project>

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
  <display-name>AjaxDemo1</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
	
	<servlet>
	  	<servlet-name>SpringMVC</servlet-name>
	  	<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
	  	<!--  DispatcherServlet绑定Spring的配置文件  -->
	  	<init-param>
	  		<param-name>contextConfigLocation</param-name>
	  		<param-value>classpath:applicationContext.xml</param-value>
	  	</init-param>
	  	<!-- 启动级别为1  -->
	  	<load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
  		<servlet-name>SpringMVC</servlet-name>
  		<url-pattern>/</url-pattern>
  	</servlet-mapping>
	
	<!--  乱码问题解决 -->
	<filter>
		<filter-name>encodingFilter</filter-name>
		<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
		<init-param>
			<param-name>encoding</param-name>
			<param-value>utf-8</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>encodingFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>
	
	<!--  会话时长设置 -->
	<session-config>
		<session-timeout>20</session-timeout>
	</session-config>
</web-app>

applicationContext.xml:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans
	http://www.springframework.org/schema/beans/spring-beans.xsd">

	<import resource="classpath:spring-mvc.xml"></import>
	<import resource = "classpath:spring-dao.xml"></import>
	<import resource = "classpath:spring-service.xml" ></import>
</beans>

mybatis-config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE  configuration
	PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
	"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
	<settings>
        <setting name="logImpl" value="LOG4J" />
    </settings>
	<!-- 对name名称下的包取别名 -->
	<typeAliases>
		<package name="com.wu.pojo"></package>
	</typeAliases>
	<mappers>
		<mapper resource="com/wu/mapper/StudentMapper.xml"/>
	</mappers>
</configuration>

spring-mvc.xml:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/beans
	http://www.springframework.org/schema/beans/spring-beans.xsd
	http://www.springframework.org/schema/context
	http://www.springframework.org/schema/context/spring-context.xsd
	http://www.springframework.org/schema/mvc
	http://www.springframework.org/schema/mvc/spring-mvc.xsd">
	
	<!--  JSON乱码问题配置  -->
	<mvc:annotation-driven>
		<mvc:message-converters register-defaults="true">
			<bean class = "org.springframework.http.converter.StringHttpMessageConverter">
				<constructor-arg value = "utf-8"></constructor-arg>
			</bean>
			<bean class = "org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
				<property name="objectMapper">
					<bean class = "org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
						<property name="failOnEmptyBeans" value = "false" />
					</bean>
				</property>
			</bean>
		</mvc:message-converters>
	</mvc:annotation-driven>
	<!--  扫描使用注解的controller包 -->
	<context:component-scan base-package="com.wu.controller" />
	<!--  资源过滤  -->
	<mvc:default-servlet-handler/>
	
	<!--  视图解析器配置 -->
	<bean class = "org.springframework.web.servlet.view.InternalResourceViewResolver"  id = "internalResourceViewResolver">
		<property name = "prefix" value = "/WEB-INF/jsp/"></property>
		<property name = "suffix"  value = ".jsp"></property>
	</bean>
	
</beans>

spring-dao.xml:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"  
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xmlns:context="http://www.springframework.org/schema/context"  
    xsi:schemaLocation="http://www.springframework.org/schema/beans  
    http://www.springframework.org/schema/beans/spring-beans.xsd  
    http://www.springframework.org/schema/context  
    http://www.springframework.org/schema/context/spring-context.xsd"> 
	
	
	<!--  关联数据库配置文件 -->
	<context:property-placeholder location="classpath:/database.properties"/>
	
	<bean id = "dataSource" class = "com.mchange.v2.c3p0.ComboPooledDataSource">
		<property name = "driverClass" value="${jdbc.driver}"/>
		<property name = "jdbcUrl"  value = "${jdbc.url}"/>
		<property name = "user"  value = "${jdbc.username}" />
		<property name = "password" value = "${jdbc.password}" />
		 
		 <property name ="maxPoolSize" value="${maxPoolSize}" /> <!--最大连接数-->
		<property name ="initialPoolSize" value="${initialPoolSize}"/> <!--初始化连接数-->
		<property name ="minPoolSize" value="${minPoolSize}" /> <!--最小连接数-->
		<property name = "autoCommitOnClose" value = "false" /> <!--  关闭连接后不自动提交 -->
	</bean>
	
	<bean id = "sqlSessionFactory" class = "org.mybatis.spring.SqlSessionFactoryBean">
		<property name = "dataSource" ref = "dataSource" />
		<!--  绑定Mybatis的配置文件 -->
		<property name = "configLocation" value = "classpath:/mybatis-config.xml" />
	</bean>
	
	<!--  将实现Mapper接口类注入Spring容器中 -->
	<bean class = "org.mybatis.spring.mapper.MapperScannerConfigurer" >
		<property name = "sqlSessionFactoryBeanName" value = "sqlSessionFactory" />
		<property name = "basePackage" value = "com.wu.mapper"/>
	</bean>
	
</beans>

spring-service.xml:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"  
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:aop="http://www.springframework.org/schema/aop"
    xmlns:tx="http://www.springframework.org/schema/tx"  
    xsi:schemaLocation="http://www.springframework.org/schema/beans  
    http://www.springframework.org/schema/beans/spring-beans.xsd  
    http://www.springframework.org/schema/context  
    http://www.springframework.org/schema/context/spring-context.xsd
    http://www.springframework.org/schema/aop
    http://www.springframework.org/schema/aop/spring-aop.xsd
    http://www.springframework.org/schema/tx
    http://www.springframework.org/schema/tx/spring-tx.xsd"> 
	
	<context:component-scan base-package = "com.wu.service" />
	
	
	<!--  声明事务配置 -->
	<bean id = "transactionManager" class = "org.springframework.jdbc.datasource.DataSourceTransactionManager">
		<property name = "dataSource" ref = "dataSource" />
	</bean>
	
	<!--  配置事务通知 -->
	<tx:advice id = "txAdvice" transaction-manager="transactionManager">
		<tx:attributes>
			<tx:method name="find*" read-only="true"/>
		</tx:attributes>	
	</tx:advice>
	
	<!--  配置事务切入 -->
	<aop:config>
		<aop:pointcut expression="execution(* com.wu.service.*.*(..))" id="txPointCut"/>
		<aop:advisor advice-ref="txAdvice" pointcut-ref="txPointCut"/>
	</aop:config>
</beans>

database.properties:

jdbc.driver=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/test?serverTimezone=UTC
jdbc.username=root
jdbc.password=root
initialPoolSize=10
maxPoolSize=30
minPoolSize=10

log4j.properties:

# 级别为debug 控制台输出
log4j.rootLogger=DEBUG, cosole
log4j.appender.cosole=org.apache.log4j.ConsoleAppender
log4j.appender.cosole.layout=org.apache.log4j.PatternLayout
log4j.appender.cosole.layout.ConversionPattern=%5p [%t] - %m%n

pojo类：

package com.wu.pojo;

public class Student {
	private String name;
	private Long id;
	private Integer grade;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Long getId() {
		return id;
	}
	public void setId(Long id) {
		this.id = id;
	}
	public Integer getGrade() {
		return grade;
	}
	public void setGrade(Integer grade) {
		this.grade = grade;
	}
	
}

mapper类及配置文件：

package com.wu.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Param;

import com.wu.pojo.Student;

public interface StudentMapper {
	List<Student> findStudentByName(@Param("studentName") String name);
}

StudentMapper.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
	PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
	"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace = "com.wu.mapper.StudentMapper">

	<resultMap type="Student" id="studentMapper">
		<id property="id" column="student_id"/>
		<result property="name" column="student_name"/>
		<result property="grade" column="student_grade"/>
	</resultMap>
	<select id="findStudentByName" resultMap = "studentMapper" parameterType = "string" >
		select * from student where student_name like CONCAT('%',#{studentName},'%')
	</select>
</mapper>

service类：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"  
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:aop="http://www.springframework.org/schema/aop"
    xmlns:tx="http://www.springframework.org/schema/tx"  
    xsi:schemaLocation="http://www.springframework.org/schema/beans  
    http://www.springframework.org/schema/beans/spring-beans.xsd  
    http://www.springframework.org/schema/context  
    http://www.springframework.org/schema/context/spring-context.xsd
    http://www.springframework.org/schema/aop
    http://www.springframework.org/schema/aop/spring-aop.xsd
    http://www.springframework.org/schema/tx
    http://www.springframework.org/schema/tx/spring-tx.xsd"> 
	
	<context:component-scan base-package = "com.wu.service" />
	
	
	<!--  声明事务配置 -->
	<bean id = "transactionManager" class = "org.springframework.jdbc.datasource.DataSourceTransactionManager">
		<property name = "dataSource" ref = "dataSource" />
	</bean>
	
	<!--  配置事务通知 -->
	<tx:advice id = "txAdvice" transaction-manager="transactionManager">
		<tx:attributes>
			<tx:method name="find*" read-only="true"/>
		</tx:attributes>	
	</tx:advice>
	
	<!--  配置事务切入 -->
	<aop:config>
		<aop:pointcut expression="execution(* com.wu.service.*.*(..))" id="txPointCut"/>
		<aop:advisor advice-ref="txAdvice" pointcut-ref="txPointCut"/>
	</aop:config>
</beans>

controller类：

package com.wu.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.wu.pojo.Student;
import com.wu.service.IStudentService;

@Controller
@RequestMapping("/ajax")
public class MyController {
	
	@Autowired
	@Qualifier("studentService")
	private IStudentService studentService;
	
	@RequestMapping(path = "/ajaxTest",method = RequestMethod.POST)
	@ResponseBody
	public String ajaxTest(String name) {
		List<Student> studentList = studentService.findStudentByName(name);
		System.out.println(studentList);
		ObjectMapper mapper = new ObjectMapper();
		String result = null;
		try {
			result = mapper.writeValueAsString(studentList);
			return result;
		} catch (JsonProcessingException e) {
			e.printStackTrace();
			return null;
		}
	}
	
	@RequestMapping(path = "/result",method = RequestMethod.GET)
	public String resultPage(String studentName,Model model) {
		List<Student> studentList = studentService.findStudentByName(studentName);
		model.addAttribute("studentList",studentList);
		return "result";
	}
}

index.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Ajax</title>
	<script type="text/javascript" src = "jquery/jquery-3.2.1.js"></script>
	<style type='text/css'>
	   .box{
	       width: 650px;
	       height: 400px;
	       margin:100px auto;
	   }
	
	   .content{
	       width: 486px;
	       height: 30px;
	       float: left;
	       padding-left:10px;
	   }
	
	   button{
	       width: 80px;
	       height: 35px;
	       float: left;
	       margin-left:20px;
	       font-size:18px;
	   }
	
	   #pop{
	       margin-top:0;
	       width: 498px;
	       height: auto;
	       border: 1px solid gray;
	       border-top:0;
	       float: left;
	   }
	
	   ul{
	       list-style: none;
	       margin:0;
	       padding:0;
	   }
	
	   ul li{
	       margin-left:10px;
	       margin-top:10px;
	       cursor: pointer;
	       height: 30px;
	       line-height:30px;
	   }
	
	   ul li:hover{
	       background-color: gray;
	   }
	</style>
	<script type = "text/javascript">
		function onchangeFun(){
			$.ajax({
				url:"ajax/ajaxTest",
				type:"POST",
				data:{"name":$("#txt").val()},
				success: function(data) {
					$("#history").empty(); // 清空记录
					var datas = $.parseJSON(data); // 将json字符串转化为js对象数组
					var content = "";
					for(var i = 0 ; i<datas.length ; i++){
						content += "<li onclick = clickFun("+"\'"+datas[i].name+"\'"+")>"+datas[i].name+"</li>";
					}
					$("#history").append(content); // 添加元素
				}
			});
		}
		// 将鼠标点击的val值传入搜索框中
		function clickFun(value){
			$("#txt").val(value);
		}
	</script>
</head>
<body >
	<div class="box" id="box">
		<h2>试试输入你的姓名</h2>
		<form action = "ajax/result/" method = "get">
	       <input type="text" name="studentName" class="content" id="txt" oninput = "onchangeFun()"/>
	       <button type="submit">搜索</button>
       </form>
	<div class="pop" id="pop">
	   <ul id = "history"></ul>
	</div>
	</div>
</body>
</html>

resule.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>结果页面</title>
</head>
<body>
	<br><br><hr>
	<div align = "center">
	<h2>结果</h2>
	<table border = "1" cellspacing = "0">
		<tr>
			<th>姓名</th>
			<th>学号</th>
			<th>班级</th>
		</tr>
		<c:forEach items = "${requestScope.studentList}" var = "s">
			<tr>
				<td>${s.name}</td>
				<td>${s.id}</td>
				<td>${s.grade}</td>
			</tr>
		</c:forEach>
	</table>
	</div>
</body>
</html>

采用Ajax技术效果：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

点击姓名，可以将内容填入搜索框内，搜索结果跳转页面：

在这里插入图片描述

一夜星尘
关注
专栏目录
Ajax util
cubicfive的专栏
11-01 148
/** * 引用方法 * */ /** * 获取文本域(textarea,input.text)中的光标位置 * 对于有换行的textarea，IE认为两行间无字符，Firefox认为两行间有一个字符 */ function getCursorPos(event){ var obj = event.target||event.srcElement; if(...
Ajax基础入门
weixin_67318211的博客
04-03 655
1.什么是Ajax技术？ AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的独立的 Web 应用程序的技术。 通过在浏览器与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行局部更新。 2.为什么要采用Ajax技术（优缺点） 使用Ajax的最大优点，就是能在不更新整个页面的前提下和服务器进行数据交互。这使得W
AJAX基础知识
是程序喵呀
07-23 928
​ 异步的 JS 和 xml(EXtensibleMarkupLanguage)​ 通过 JS 异步的向服务器发送请求并接收响应数据​ 同步访问：​ 当客户端向服务器发送请求时，服务器在处理的过程中，浏览器只能等待，效率较低​ 异步访问：​ 当客户端向服务器发送请求时，服务器在处理的过程中，客户端可以做其他的操作，不需要一直等待​ AJAX优点：​ 1.异步访问​ 2.局部刷新​ 使用场合：​ 1.搜索建议。
Ajax入门教程
qq_22075913的博客
03-31 5348
Ajax 学习目标 了解Ajax的概念和作用 了解同步和异步的区别 能够使用jQuery的$.get()和$.post()发送Ajax请求 能够使用jQuery的$.ajax()方法发送Ajax请求 能够定义和解析json 能够使用Jackson转换json格式 能够使用fastjson转换json格式 第一章-JS的AJAX 知识点- AJAX的概述 1.目标 能够理解异步的概念 2.路径 什么是Ajax 什么是异步 为什么要学习Ajax 3.讲解 3
ajax入门
dzz_bc的博客
05-24 534
AJAX    A  synchronous  J A vaScript and  X  ML 异步刷新传统方式如果校验用户名的话，需要提交验证，用户名存储在数据库中，只有提交才可与服务器交互。ajax是局部刷新的功能，下边的例子，就是可以直接和servlet交互，从而达到校验的目的。get方式jsp页面&lt;%@ page language="java" contentType="text/h...
ajax基础入门—登录验证
09-30 680
对于ajax，很多人只知道它是前后端数据对接的工具，但是ajax到底是什么，它的功能仅仅局限于此吗？ 　　AJAX =Asynchronous JavaScript and XML，即异步 JavaScript 和 XML，简单地理解，AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对
Ajax入门基础01
ty
07-03 291
Ajax入门 使用ajax技术，向后台服务器发出异步请求操作，不影响整个页面 的继续操作 在js中给服务器发送异步请求 //1.创建异步请求对象 var xhr = new XMLHttpRequest(); //2.打开异步请求对象，并设置参数 var username = document.getElementById("username").value; var url = "checkUse
Ajax基础入门(day1) - 服务器的概念 & 初识 Ajax
JOUKELOVE的博客
08-21 353
一、服务器相关的基础概念 二、Ajax 的基础用法 三、请求报文&响应报文 四、接口相关的基础概念 五、案例–聊天机器人
普歌智音团队--Ajax基础入门
m0_49500864的博客
08-17 263
普歌智音团队–Ajax基础入门 一:Ajax概述 Ajax是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站应用的体验; 二:Ajax的应用场景 三.Ajax的实现步骤 代码示例 四:Ajax请求参数传递 五:Ajax错误处理 六:Ajax封装 主要原因:发送一次请求代码过多,发送多次代码冗余重复 七:模板引擎 代码实例 ...
Ajax基础入门简介
06-23
**Ajax基础入门简介** Ajax（Asynchronous JavaScript and XML）是一种用于创建快速、动态网页的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这一技术的出现极大地提升...
Ajax从入门到精通.pdf
05-09
Ajax从入门到精通.pdf 本书籍旨在深入浅出地介绍 Ajax 技术，从基础知识到高级应用，全面覆盖 Ajax 的核心概念、技术原理、实现方法和实践应用。书籍的主要内容包括： 1. Ajax 概述：本书首先介绍了 Ajax 的概念、...
ajax基础教程和ajax从入门到精通
04-24
**Ajax基础教程** Ajax（Asynchronous ...通过阅读《Ajax从入门到精通.pdf》和《ajax基础教程.pdf》，你可以系统地学习Ajax的各个方面，从基础知识到进阶技巧，逐步提升自己的技能，成为一名精通Ajax的开发者。
ajax 入门基础之 XMLHttpRequest对象总结
10-29
**Ajax入门基础之XMLHttpRequest对象总结** Ajax，即异步JavaScript和XML，是一种在无需刷新整个页面的情况下更新部分网页的技术。在Ajax的核心中，XMLHttpRequest（XHR）对象扮演着至关重要的角色，它允许...
AJAX基础入门
qq331697853的博客
11-30 659
我们平常上网，不管是注册账号，还是浏览网页，其本质就是通过客户端向服务器发送请求，服务器接到请求后返回处理后的数据给客户端； 在我们之前学习代码中，向服务器提交数据典型的应用是就是 form 表单，其中的 action 就是我们提交数据的服务器端地址；完成一个 form 表单； 当我们点击提交按钮时，页面就会跳转到服务器页面；但是，我本不想让页面跳转，数据也能被发送到服务器端，同时，还可以接受服务器返回的数据；当我注册一个网站的账号时，填写完用户名并没有点击提交，但是，用户名如果有重复，文本框的傍边便会提示
Ajax实现一个简单的文件上传进度条
程序人生
09-04 764
Ajax实现一个简单的文件上传进度条功能。
Day01_Ajax入门
闲杂人
09-12 674
请求方法是一些固定单词的英文，例如：GET，POST，PUT，DELETE，PATCH（这些都是http协议规定的），每个单词对应一种对服务器资源要执行的操作。浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页。统一资源定位符，简称网址，用于定位网络中的资源（资源指的是：网页，图片，数据，视频，音频等等）标记服务器在互联网当中的方位，网络中有很多服务器，你想访问哪一台，就需要知道它的域名才可以。
JAVA+access综合测评系统毕业设计(源代码+论文+开题报告+任务书).zip
最新发布
09-12
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
33企业财务风险分析及防范——以永辉超市股份有限公司为例.docx
09-12
33企业财务风险分析及防范——以永辉超市股份有限公司为例
Ajax基础入门教程：浏览器历史与早期Web技术
本文旨在提供一个详尽的Ajax基础教程，主要针对Java开发者入门。Ajax（Asynchronous JavaScript and XML）是一种客户端网页开发技术，它允许网页在不重新加载整个页面的情况下，通过异步方式与服务器进行数据交换，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值