116 Ajax简单应用

最新推荐文章于 2023-06-22 10:18:01 发布
最新推荐文章于 2023-06-22 10:18:01 发布
阅读量243 收藏
点赞数
分类专栏： JavaWeb 文章标签： json ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang_luwei/article/details/107797048
版权

文章目录

一、引言

1.1什么是JSON

  • JSON(JavaScript Object Notation, JS对象标记）是一种轻量级的数据交换格式。
  • 它基于ECMAScript (W3C制定的JS规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
  • 简洁和清晰的层次结构使得JS0N成为理想的数据交换语言。易于人阅读和编 写，同时也易于机器解析和生成，并有效地提升网络传输效率。

1.2 JS0N语法

  • []表示数组
  • {}表示对象
  • " "（英文双引号）表示是属性名或字符串类型的值
  • : （英文冒号）表示属性和值之间的间隔符
  • ,（英文逗号）表示多个属性的间隔符或者是多个元素的间隔符

二、JSON解析【重点】

  • 要解析的字符串：将字符串解析为Java对象
//对象嵌套数组嵌套对象
String json1 = "{'id':1,'name':'JAVAEE-1703','stus' :[{'id' :101, 'name' :'刘一','age' :16}]}";
 //数组
String json2="['北京','天津','杭州']";
  • 初始的类：
    • Student.java
    • Grade.java
public class Student {
     private int id; 
	 private String name;
	 private int age;
	//此处省略get和set方法
}

public class Grade { 
    private int id;
    private String name; 
    private ArrayList<Student> stus;
	//此处省略get和set方法
}

2.1 FastJSON 解析

  • Fastjson是一个Java库，可以将 Java对象 转换为 JSON 格式，当然它也可以将JSON字符串转换为Java对象

  • 提供了 toJSONString() 和 parseObject() 方法来将Java对象与JSON相互转换：

    • 调用 toJSONString 方法即可将对象转换成JSON字符串
    • parseObject方法 则反过来将JSON字符串转换成对象。
parseObject方法：字符串转换成对象
public class FASTJson {
    //解析

    @Test
    public void testl() {
        //对象嵌套数组嵌套对象
        String json1 = "{'id':1,'name':'JAVAEE-1703','stus':[{'id' :101, 'name' :'刘							一','age' :16}]}";
        String json2="['北京','天津','杭州']";

        //1.
        //静态方法
        Grade grade = JSON.parseObject(jsonl, Grade.class);
        System.out.printIn(grade);
        //2、
        List<String> list=JSON.parseArray(json2, String.class); 
        System.out.println(list);
    }
}
toJSONString方法：对象转换成JSON字符串
public class FASTJson {
    //生成
    @Test
    public void test2(){
        ArrayList<Student> list=new ArrayList<>(); 
        for(int i=1;i<3;i++){
        	list.add(newStudent(101+i,"码子",20+i));
         }
        Grade grade=new Grade(100001,"张三",list); 
        String json=JS0N.toJSONString(grade);
        System.out.println(json);
    }
}
FastJSON代码：
  • 注意：使用前要先导入jar包：fastjson-1.2.68.jar
package com.wlw.chapter2_ajax_json;
import java.util.Date;

public class User {
    private int id;
    private String name;
    private boolean gender;
    private Date birth;

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", gender=" + gender +
                ", birth=" + birth +
                '}';
    }

    public int getId() {return id;}
    public void setId(int id) {this.id = id;}
    public String getName() {return name;}
    public void setName(String name) {this.name = name;}
    public boolean isGender() {return gender;}
    public void setGender(boolean gender) {this.gender = gender;}
    public Date getBirth() {return birth;}
    public void setBirth(Date birth) {this.birth = birth;}
}


package com.wlw.chapter2_ajax_json;

import com.alibaba.fastjson.JSON;

import java.util.Date;

public class demo1_fastjson{
    public static void main(String[] args) {
        User user = new User();
        user.setId(1);
        user.setName("xiaoming");
        user.setGender(true);
        user.setBirth(new Date());

        String toJSONString = JSON.toJSONString(user);
        System.out.println(toJSONString);//{"birth":1596424586316,"gender":true,"id":1,"name":"xiaoming"}

        String json = "{" + "\t\"birth\": 1596423990532," + "\t\"gender\": true," + "\t\"id\": 1," + "\t\"name\": \"xiaoming\"\n" + "}";
        String mess = "{'id':1,'name':'xiaoming','gender':true,'birth':'1999-09-09'}";
        //json里的属性要加英文单引号,属性值除了nummber与boolean都要加英文单引号

        User user1 = JSON.parseObject(mess, User.class);//User{id=1, name='xiaoming', gender=true, birth=Thu Sep 09 00:00:00 CST 1999}
        System.out.println(user1);
    }
}

2.2 Jackson解析

  • Jackson是一个能够将 Java对象 序列化为 JSON字符串，也能够将 JSON字符串 反序列化为 Java对象 的框架；

  • 通过方法 readValue 和writeValue实现；

public class JackSonTest {

	//解析 
    @Test
    public void testl() throws Exception{
        //对象嵌套数组嵌套对象
    	String json1 = "{'id':1,'name':'JAVAEE-1703','stus':[{'id' :101, 'name' :'刘							一','age' :16}]}";
        String json2="['北京','天津','杭州']";
         //1、
        ObjectMapper mapper=new ObjectMapper();
        Grade grade = mapper.readValue(json1, Grade.class);
        System.out.println(grade);

        //2、
        ArrayList<String> list=mapper.readValue(json2,
            new TypeReference<ArrayList<String>() {
        });
        System.out.println(list);

    }


    //生成 @Test
    public void test2() throws JsonProcessingException-{
        ArrayList<Student> list=new ArrayList<>(); for(int i=1;i<3;i++){
            list.add(newStudent(101+i,"码子，20+i));
        }

        Grade grade=new Grade(100001,"张三"，list); 
        ObjectMapper mapper=new ObjectMapper();

        //将对象转换为JSON格式字符串
        String json=mapper.writeValueAsString(grade); 
        System.out.println(json);
     }   
}
Jackson代码：

注意：要导jar包

jackson-annotations-2.9.10.jar

jackson-core-2.9.10.jar

jackson-databind-2.9.10.jar

package com.wlw.chapter2_ajax_json;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

import java.io.IOException;

public class Demo2_jackson {
    public static void main(String[] args) throws Exception{

        Test1(); //{"id":2,"name":"xiaohong","gender":false,"birth":null}
        Test2(); //User{id=2, name='xiaohong', gender=false, birth=null}
    }
    public static void Test1() throws JsonProcessingException {
        ObjectMapper objectMapper = new ObjectMapper();
        User user = new User();
        user.setId(2);
        user.setName("xiaohong");
        //对象转换为json(序列化)
        String to_json = objectMapper.writeValueAsString(user);
        System.out.println(to_json);

    }
    public static void Test2() throws IOException {
        ObjectMapper objectMapper = new ObjectMapper();
        // JSON字符串 反序列化为 Java对象
        String from_json = "{" + "\t\"id\": 2," + "\t\"name\": \"xiaohong\"," + "\t\"gender\": false," + "\t\"birth\": null" + "}";
        User user1 = objectMapper.readValue(from_json, User.class);

        System.out.println(user1);
    }
}

2.3浏览器处理JSON字符串

  • JSON.stringify()
var json={name:'zs',age:34};
var str=JSON.stringify(json);
alert(str);

2.4流览器转换为json对象

  • JSON.parse()

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo1 浏览器处理JSON</title>
	</head>
	<body>
		<script type="text/javascript">
			//json对象
			var obj={name:"zhangsan",age:20,class:1};
			
			//浏览器将对象转换为字符串的方法
			var res=JSON.stringify(obj);
			alert(typeof(res)); //弹出 res的类型 (String)
			
			//浏览器将字符串转为对象
			res=JSON.parse(res);
			alert(typeof (res));
			document.write(res.name);
		</script>
	</body>
</html>

三、Ajax使用【重点】

3.1什么是AJAX?

  • AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

  • AJAX = Asynchronous异步 JavaScript and XML。

  • AJAX是一种用于创建快速动态网页的技术。

  • 通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页 的某部分进行更新。

  • 传统的网页（不使用AJAX)如果需要更新内容，必需重载整个网页。

3.2 AJAX工作原理

在这里插入图片描述

  • AJAX是基于现有的Internet标准，并且联合使用它们:
  • XMLHttpRequest对象（异步的与服务器交换数据）
  • JavaScript/DOM (信息显示/交互）
  • CSS (给数据定义样式）
  • XML (作为转换数据的格式）

3.3 AJAX实例

  • html代码，下面的AJAX应用程序包含一个div和一个按钮。

  • div部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为loadXMLDoc()的函数:

<body>
    <div id = "myDiv"> <h2>使用 AJAX 修改该文本内容</h2> </div>
	<button type="button" onclick="loadXMLDoc()">修改内容</button> 
</body>
  • 接下来，在页面的head部分添加一个< script>标签。该标签中包含了这个loadXMLDoc()函数:
<head>
   <script type="text/javascript">
       function loadXMLDoc(){
           ......AJAX脚本执行......
       }
   </script>
</head>

3.4 创建XMLHttpRequest对象

  • XMLHttpRequest 对象是 AJAX 的基础

  • 所有现代浏览器均支持 XMLHttpRequest 对象（IE5和IE6使用ActiveXObject)。

  • XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

  • 所有现代浏览器（IE7+、Firefox、Chrome、Safari以及Opera)均内建XMLHttpRequest对象。创建XMLHttpRequest对象的语法:

var xmlhttp = new XMLHttpRequest();
  • 老版本的Intemet Explorer (IE5和IE6)使用ActiveXObject对象:
var xmlhttp = new ActiveXObject ("Microsoft. XMLHTTP,');
  • 为了应对所有的现代浏览器，包括 IE5和IE6,请检查浏览器是否支持XMLHttpRequest对象。如果支持，则创建XMLHttpRequest对 象。如果不支持，则创建ActiveXObject:
var xmlhttp;
if (window.XMLHttpRequest){
	//IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
	xmlhttp=new XMLHttpRequest();
}else{
	// IE6, IE5浏览器执行代码
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

3.5 XMLHttpRequest请求

  • 如需将请求发送到服务器，我们使用XMLHttpRequest对象的open()和send()方法:
xmlhttp.open("GET","ajax_info.txt",true); 
xmlhttp.send();
方法描述
open(method,url,async)规定请求的类型、URL以及是否异步处理请求。method:请求的类型；GET或POST; url:文件在服务器上的位置；async: true (异步）或false (同步），并且XMLHttpRequest对象如果要用于AJAX的 话，其open()方法的async参数必须设置为true;
send(string)将请求发送到服务器。string:仅用于POST请求
  • GET 还是 POST?
  • 与POST相比，GET更简单也更快，并且在大部分情况下都能用。
  • 然而，在以下情况中，请使用POST请求：
    • 无法使用缓存文件（更新服务器上的文件或数据库）
    • 向服务器发送大量数据（POST没有数据量限制）
    • 发送包含未知字符的用户输入时，POST比GET更稳定也更可靠
GET请求
//示例一：一个简单的GET请求：
xmlhttp.open("GET","/try/ajax/demo_get.php",true); 
xmlhttp.send();

//示例二：在上面的例子中，您可能得到的是缓存的结果，为了避免这种情况，请向URL添加一个唯一的ID: 
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

//示例三：如果您希望通过GET方法发送信息，请向URL添加信息：
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lnafne=Ford",true); xmlhttp.send();
POST请求
//示例一：一个简单POST请求
xmlhttp.openC"POST",""/try/ajax/demo-posli.php",true):
xmlhttp.send();

//如果需要像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头。然后在send()方法中规定您希望发送的数据: 
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader( "Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Fold");//里面是参数
方法描述
setRequestHeader( header,value )向请求添加HTTP头。header:规定头的名称 , value:规定头的值

  • 对于web开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX出现之前，这可能会引 起应用程序挂起或停止。

  • 通过AJAX, JavaScript无需等待服务器的响应，而是：

    • 在等待服务器响应时执行其他脚本
    • 当响应就绪后对响应进行处理

  • 当使用Async=true时，请规定在响应处于onreadystatechange事件中的就绪状态时执行的函数：

//绑定执行函数：
xmlhttp.onreadystatechange=function(){
	if (xmlhttp.readyState==4 && xmlhttp.status==200){
		document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
	}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); 
xmlhttp.send();

  • 如需使用async=false，请将open()方法中的第三个参数改为false:

  • 我们不推荐使用asynC=false，但是对于一些小型的请求，也是可以的。

  • 请记住，JavaScript会等到服务器晌应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

  • 注意：当您使用async=false时，请不要编写onreadystatechange函数-把代码放到send()语句后面即可：

3.6 readyState

  • 每当readyState改变时，就会触发onreadystatechange事件0

  • 在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。 • readyState属性存有XMLHttpRequest的状态信息。

  • 当readyState等于4且状态为200时，表示响应已就绪：

  • 下面是XMLHttpRequest对象的三个重要的属性：

属性描述
onreadystatechange存储函数（或函数名），每当readyState属性改变时，就会调用该函数。
readyState存有XMLHttpRequest的状态。从0到4发生变化。0:请求未初始化1:服务器连接已建立2:请求已接收3:请求处 理中4:请求已完成，且响应已就绪
status例：200: “0K”; 404:未找到页面
xmlhttp.onreadystatechange=function()  {     
	if (xmlhttp.readyState==4 && xmlhttp.status==200){
		document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
	}
}
响应码描述
100客户必须继续发出请求
101客户要求服务器根据请求转换HTTP协议版本
200交易成功
201提示知道新文件的URL
202接受和处理、但处理未完成
203返回信息不确定或不完整
204请求收到，但返回信息为空
205服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206服务器已经完成了部分用户的GET请求
300请求的资源可在多处得到
301删除请求数据
302在其他地址发现了请求数据
303建议客户访问其他URL或访问方式
304客户端已经执行了GET,但文件未变化
305请求的资源必须从服务器指定的地址得到
306前一版本HTTP中使用的代码，现行版本中不再使用
307申明请求的资源临时性删除
400错误请求，如语法错误
401请求授权失败
402保留有效ChargeTo头响应
403请求不允许
404没有发现文件、查询或URl
405用户在Request-Line字段定义的方法不允许
406根据用户发送的Accept拖，请求资源不可访问
407类似401，用户必须首先在代理服务器上得到授权
408客户端没有在用户指定的饿时间内完成请求
409对当前资源状态，请求不能完成
410服务器上不再有此资源且无进一步的参考地址
411服务器拒绝用户定义的Content-Length属性请求
412一个或多个请求头字段在当前请求中错误
413请求的资源大于服务器允许的大小
414请求的资源URL长于服务器允许的长度
415请求资源不支持请求项目格式
416请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
500服务器产生内部错误
501服务器不支持请求的函数
502服务器暂时不可用，有时是为了防止发生系统过载
503服务器过载或暂停维修
504关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505服务器不支持或拒绝支请求头中指定的HTTP版本

3.7 XMLHttpRequest响应

  • 如需获得来自服务器的响应，请使用XMLHttpRequest对象的responseText或responseXML属性。
属性描述
responseText获得字符串形式的响应数据。
responseXML获得XML形式的响应数据。
  • responseText 属性
    • 如果来自服务器的响应并非XML,请使用responseText属性。
    • responseText属性返回字符串形式的响应，因此您可以这样使用
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  • responseXML 属性
    • 如果来自服务器的响应是XML,而且需要作为XML对象进行解析，请使用responseXML属性：
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST"); 
for (i=0;i<x.length;i++){
	txt=txt + x[i].childNodes[0].nodeValue +"<br>";
}
document.getElementById("myDiv").innerHTML=txt;

代码：(这是在web项目下)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #res{width:600px; height:200px; font-size: 50px; font-weight: bold; line-height: 200px;}
    </style>
</head>
<body>
    <button id="btn">填充数据</button>
    <div id="res"></div>

    <script type="text/javascript">
        var btn = document.getElementById("btn");
        var res = document.getElementById("res");
        btn.addEventListener("click", function () {
            //创建XMLHttpRequest
            var xhr = new XMLHttpRequest();
            xhr.open("post", "data");
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
            xhr.send("name=zss&age=20");
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    res.innerHTML=xhr.responseText;
                }
            }
        });

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

package com.wlw.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/data")
public class DataServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name=req.getParameter("name");
        String age=req.getParameter("age");
        System.out.println("name === " + name);
        System.out.println("age === " + age);
        String mess="hello ajax!";
        PrintWriter writer = resp.getWriter();
        writer.write(mess);
        writer.flush();
        writer.close();
    }
}

3.8使用回调函数

  • 回调函数是一种以参数形式传递给另一个函数的函数。

  • 如果您的网站上存在多个AJAX任务，那么您应该为创建XMLHttpRequest对象编写一个标洛的函数，并为每个AJAX任务调用该 函数。

  • 该函数调用应该包含URL以及发生onreadystatechange事件时执行的任务（每次调用可能不尽相同）：

function myFunction(){
	loadXMLDoc("/try/ajax/ajax_info.txt",function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
			document.getElementByldf"myDiv").innerHTML=xmlhttp.responseText;
	}});
}

四、AJAX的使用

4.1 AJAX与服务器交互

  • 模拟登陆验证

  • 验证用户是否可以注册，利用AJAX技术!进行动态验证

    • 编写注册页面
<%@ page language= "java" import= "java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request. getScheme()+" ://"+request.getServerName()+" :”" +request.getServerPort()+path+/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%> ">
		<title>My JSP ' index. jsp' starting page</title>
        <meta http-equiv= "pragma" content="no-cache">
        <meta http- equiv= "cache-control" content= "no-cache">
        <meta http-equiv= "expires" content="0">
        <meta http-equiv= "keywords" content=" keyword1 , keyword2 , keyword3">
        <meta http-equiv= "description" content="This is my page">
        <script type= "text/javascript" src=" ./ajax.js"></script>
        <!--
        <link rel=" stylesheet" type="text/css" href="styles .css">
        -->
    </head>
    <body>
        <center>
            <font color="red" size="7">qq注册页面</font>
            <input type="text" name= "username" οnkeyup="kp(this)" /> 
            <span id="sp"></span> <br/>
            <input type="password" name="password" /><br/>
            <input type=" submit" value= "注册" />
		</center>
        <script type= "text/javascript">
            
        //当用户名输入框输入内容就调用此方法
        function kp(ipt){
            
        //1.获取input输入框的value
        var value = ipt.value;
        //2.进行验证
        if(value != null && value !=""){
            //1-5
            //1.创建Ajax
            var xmlhttp = getAjax();
            //2.设置状态改变监听
            xmlhttp.onreadystatechange = function(){
                //5获取响应数据
                if(xmlhttp. readyState == 4 && xmlhttp. status ==200){
                    var result = xmlhttp. responseText; //获取结果
                    //1行2不行
                    //1.找到span标签
                    var sp = document.getElementById("sp"); 
                    
                    if(result == "1"){
                    	//成功的span 提示一句绿色的话
                    	sp. innerHTML=""; //清空
                   	 	var ft = document.createElement("font");
                    	var fttext = document.createTextNode(”恭喜您!可以注册!!"); //文本标签
                    	ft.setAttribute("color", "green");
                    	ft.appendChild(fttext);
                    	sp.appendChild(ft);
                    }else{
                        //失败的span 提示一句红色的话
                        sp.innerText="用户已经被注册!";
                        sp.style.color = "red";
                    }
                }
            }
            //3.设置ajax method url
        	xmlhttp.open("POST",
       		 "${pageContext.request.contextPath}/servlet/DealServlet");
        	//4.发送请求
        	//设置一-个请求头
        	xmlhttp.setRequestHeader("Content-type"，"application/ X-www- form-					urlencoded");
        	xmlhttp.send("value=" +value);
        </script>
    </body>
< /html>

4.2 编写AJAX处理servlet

public class DealServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOExeception{
        //0.设置编码格式
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        //1.
		String value = request.getParameter("value");
        //2.
		String result = null;
        if (value.equals("root") ||value.equals("admin")) {
            result = "2";
            //代表已经存在 
        }else{
            //可以注册 
            result = "1";
        }  
        //3.
		response.getWriter().write(result);
    }
}
悬浮海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ajax常用案例,AJAX实例
weixin_34649252的博客
08-05 2042
AJAX实例用户页面发起一个请求， 使用servlet输出数据到jsp练习使用HttpServletResposne输出。pint使用servlet输出一个字符串响应ajax请求根据省份id查询省份名称需求：用户在文本框架输入省份的编号id，在其他文本框显示省份名称● 项目环境准备：数据库：springdb数据表：● 省份信息表：CREATE TABLE `province` (`id` int(...
简单的ajax案例，页面的简单渲染
zhangawei123的博客
11-15 1364
在初学ajax后，我们可以尝试着使用ajax来完成页面的一个简单的渲染。效果就是把几张图片和文字渲染到页面上，来加深我们对ajax的理解和熟悉ajax的应用。有详细步骤的讲解，不需要讲解的大佬也可以去后面看源码。
深入理解ajax系列之一-XHR对象
热门推荐
arthur的博客
04-03 1万+
概述 　　ajax是asynchronous javascript and XML的简写，中文翻译是异步的javascript和XML，这一技术能够向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。虽然名字中包含XML，但ajax通信与数据格式无关。 ajax包括几个步骤： 1：创建ajax请求， 2：发出http请求 3：收到服务器传回的消息 4：更新网页数据、 　　概括
简单介绍html/javascript、ajax应用
最新发布
Java 技术专栏，从入门到精通，熟悉企业级开发
06-22 1785
今天简单的介绍HTML，以及简单的JavaScript、ajax交互
Ajax的简单使用
m0_62609939的博客
04-28 1640
Ajax的简单使用
Ajax项目应用简单实例
生活中的思索
09-15 2909
function showTest(){ if (confirm("确定要进行吗?")){ j$.ajax({ type: "post", url: "pplrule_do.jsp", data: "id=<%=id%>&name=<%=name%>", success: funct
Ajax的Promise应用
@宝藏男孩
07-13 1917
异步回调的问题 之前处理异步是通过纯粹的回调函数的形式进行处理 很容易进入到回调地狱中，剥夺了函数return的能力 问题可以解决，但是难以读懂，维护困难 稍有不慎就会踏入 回调地狱—嵌套层次深，不好维护 在实际的使用中，有非常多的应用场景我们不能立即知道应该如何继续往下执行。最常见的一个场景就是ajax请求。通俗来说，由于网速的不同，可能你得到返回值的时间也是不同的，这个时候我们就需要等待，结果出来了之后才知道怎么样继续下去。 // 简单的ajax原生实现 var context; var xhr =
vue如何实现ajax,Vue应用程序中如何实现AJAX
weixin_36474829的博客
08-06 1479
Vue应用程序中如何实现AJAX发布时间：2021-01-18 13:56:56来源：亿速云阅读：76作者：小新小编给大家分享一下Vue应用程序中如何实现AJAX，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！Vue没有提供实现AJAX的正式方法，而且有许多不同的设计模式可以有效地使用。每种方法都有其优缺点，应该根据需求进...
json 及 Ajax 简单总结
weixin_42249629的博客
08-04 7665
json ： 一种数据格式，类似 xml （按层级表示对象，及对象之间的层级关系)，也是表示对象，属性，json 相对于xml 格式  非常轻量级  很适合服务器与JavaScript 之间的交互。            在json 中：【】--数组集合    { }--对象                                数据主要以键值对形式存在 name:value   各...
AJAX 详解
m0_48041877的博客
08-26 5383
AJAX 详细介绍
AJAX简单应用
07-18
在"AJAX简单应用"这个例子中，我们可以探讨以下几个关键知识点： 1. **XMLHttpRequest对象**：AJAX的核心是XMLHttpRequest（XHR）对象，它是JavaScript内置的对象，负责在后台与服务器进行通信。通过创建...
PHP开发中AJAX技术的简单应用
10-23
5. **JSON数据格式** - 虽然AJAX的名称包含XML，但现在更多的应用选择使用JSON作为数据交换格式，因为JSON更轻量级且易于解析。 在PHP开发中，服务器端通常负责接收AJAX请求，处理数据，然后以JSON或XML格式返回。...
java ajax简单应用
09-02
首先，我们来看标题“java ajax简单应用”。这个主题主要涉及两个核心技术：Java Servlet和Ajax。Java Servlet是Java平台上的服务器端组件，用于扩展Web服务器的功能，处理HTTP请求。而Ajax则是在客户端进行的，它...
ajax简单注册的应用
10-20
**Ajax 简单注册应用详解** Ajax（Asynchronous JavaScript and XML）技术是现代Web开发中的重要组成部分，它允许在不刷新整个网页的情况下与服务器交换数据并更新部分网页内容。在本实例中，我们将探讨如何利用...
AJAX简单应用实例-弹出层
10-30
### AJAX的简单应用 #### 1. 创建XMLHttpRequest对象 AJAX的核心是XMLHttpRequest对象，它负责在后台与服务器进行通信。在创建XMLHttpRequest对象时，需要根据浏览器的不同采用不同的方法： ```javascript ...
135 javaweb综合项目MyShop
wang_luwei的博客
09-03 1952
文章目录一、网上商城1.1网上商城介绍1.2商城类别1.3商城常见模块二、软件开发流程【重点】2.1周期和阶段2.2开发流程2.2.1. 需求分析2.2.2. 概要设计2.2.3. 详细设计2.2.4. 编码2.2.5.测试2.2.6.软件交付2.2.7.验收2.2.8.维护三、MyShop项目介绍3.1开发环境3.2主要功能3.3项目展示四、数据库设计【重点】4.1 PowerDesigner设计软件介绍4.1.1概念数据模型CDM4.1.2物理数据模型PDM4.1.3CDM 和 PDM 对比4.1.4数
115 JS(javascript)
wang_luwei的博客
08-04 920
文章目录一、引言1.1 JavaScript 简介1.1.1 前端三要素1.2 JavaScript组成部分1.3 JavaScript 发展史1.4JavaScript环境搭建二、JavaScript基本语法2.1变量声明2.2基本类型2.3引用类型2.4数组类型2.5运算符逻辑运算关系运算单目运算：自增自减双目运算符三目运算符：？:2.6条件分支结构2.7循环结构2.8函数【重点】2.9常见弹窗函数2.10事件2.11正则表达式三、JavaScript的DOM对象【重点】3.1概述3.2查找HTML元素
134 EMS综合项目
wang_luwei的博客
08-13 402
文章目录1.项目需求2.项目搭建2.1项目目录搭建2.2项目资源引入2.3数据库创建3.项目开发database.propertiesDbUtilsEmpEmpManagerPageEmpManagerDaoEmpManagerDaoImplEmpDaoEmpDaoImplEmpManagerServiceEmpManagerServiceImplEmpServiceEmpServiceImplCheckFilterEncodingFilter3.1登录功能EmpManagerLoginController
113 HTML5
wang_luwei的博客
08-02 402
文章目录一、引言1.1HTML 概念二、HTML简介2.1什么是HTML2.2 HTML能做什么2.3 HTML书写规范三、HTML基本标签3.1结构标签3.2排版标签3.3块标签3.4基本文字标签3.5文本格式化标签3.6标题标签3.7列表标签(清单标签）3.8图形标签3.9链接标签3.10表格标签四、HTML表单标签4.1 form元素常用属性4.2 input元素4.3select元素(下拉列表）4.4 textarea元素(文本域）五、HTML框架标签5.1框架结构标签frameset5.2
jQuery教程：Ajax应用与表格操作
"jQuery的Ajax应用、操作表格和插件是本章重点讲解的内容。jQuery方法通常通过工厂函数$()创建，$(document).ready()确保DOM加载完成后执行代码。jQuery支持多种选择器，并能方便地操作DOM和样式，提供丰富的动画...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

悬浮海

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值