阅读前,先声明请使用C#的.net或者JAVA的spring框架,因为本人主攻C语言和java的页面,不搞PHP,所以如果C和JAVA都没学过的,可能只有HTML的代码有用,感谢理解。
ajax() 方法简单易用的高层实现有$.get, $.post
等。$.ajax()
返回其创建的 XMLHttpRequest 对象。
最简单的情况下,$.ajax() 可以不带任何参数直接使用。
语法:
jQuery.ajax([settings])
补充:[settings]用于配置 Ajax 请求的键值对集合,且可以为空。
注意:我们必须确保网页服务器报告的 MIME 类型与我们选择的 dataType 所匹配。比如说,XML的话,服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果。
举个实际的例子:
假入我们把传递给 spring 的控制器一个字符串 ,然后用服务器的返回值作为弹窗结果显示出来,该怎么操作呢?
首先:html先进行ajax的书写,为了方便大家阅读,我将注释打在了每个代码的旁边。以下是HTML5的页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="??" method="get">
<input type="text" value="用户名" onclick="checkUserName()" id="userName">
<input type="text" value="密码" id="passWord">
<input type="submit" value="提交">
</form>
</body>
<script type="text/javascript" src="../static/js/jquery-3.5.1.js">
</script>
<script>
var ajaxStar = "";
function checkUserName(){
ajaxStar = getXmlHttpObject();
if( ajaxStar ){
alert("引擎success");
//通过ajax请求时,第一个参数为请求方式get或者post。第二个参数为url
//第三个参数表示是否使用异步机制
// var url = "http://127.0.0.1:8080/ajaxTest?userName="+$("userName").value;//get
var url = "http://127.0.0.1:8080/ajaxTest";//post
// alert(url);
// ajaxStar.open("get",url,true);
ajaxStar.open("post",url,true);
//设置请求方式
// 如果想要使用post提交数据,必须添加此行
ajaxStar.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// ajaxStar.setRequestHeader("cache-control", "no-cache");
//指定回调函数
ajaxStar.onreadystatechange=dealFunction;
// ajaxStar.send(null);//get填空,post填数据
var userNameString = $("userName").value;
// alert(userNameString);
ajaxStar.send( "userName="+ userNameString);
}
else{
alert("引擎error");
}
}
//创建ajax引擎
function getXmlHttpObject(){
var xmlHttpRequest;
if(window.ActiveXObject){
// alert("ie用户欢迎您");
xmlHttpRequest = new ActiveXObject( "Microsoft.XMLHTTP" );
}
else{
// alert("非ie用户欢迎您");
xmlHttpRequest = new XMLHttpRequest();
}
return xmlHttpRequest;
}
function $(id){
return document.getElementById(id);
}
function dealFunction(){
alert("处理函数被调用" + ajaxStar.readyState);
//readyState:4的原因 0初始化,1未读取,2读取中,3交互中,4完成
//但是html5测试结果只有1次,数字是4
//status:200——交易成功
if( ajaxStar.readyState == 4 && ajaxStar.status == 200 ){
alert("服务器返回" + ajaxStar.responseText);
}
}
</script>
</html>
因为ajax的异步刷新主要用于前后端交互,所以我用spring框架的控制器作为服务器端代码书写:
package com.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Controller
public class PageBrowserController {
@RequestMapping("/ajaxTest")
@ResponseBody
//返回json的写法
// public Map ajaxTest(String userName){
// Map jsonMap = new HashMap();
// jsonMap.put("userName",userName);
// System.out.println(userName);
// return jsonMap;
// }
/*
* 在客户端使用get请求时,服务器端使用Request.QueryString来获取参数,
* 而客户端使用post请求时,服务器端使用Request.Form来获取参数.
* */
public String ajaxTest(@RequestParam("userName") String userName,
HttpServletRequest request,
HttpServletResponse response){
// System.out.println(userName);
String curOrigin = request.getHeader("Origin");
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
response.setHeader("Access-Control-Allow-Origin",
curOrigin == null ? "true" : curOrigin);
response.setHeader("Access-Control-Allow-Credentials",
"true");
response.setHeader("Access-Control-Allow-Methods",
"POST, GET, PATCH, DELETE, PUT");
response.setHeader("Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept");
return userName;
}
@RequestMapping("/ajaxReq")
// @ResponseBody
public String ajaxReq(){
return "ajax请求.html";
}
}
运行结果: