ajax第一例:helloworld|学习笔记

简介: 快速学习ajax第一例:helloworld

开发者学堂课程【Ajax:ajax第一例:helloworld】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/31

ajax第一例:helloworld


目录:

.写服务器端代码

二、做客户端的响应

写客户端代码

四、总结


一.写服务器端代码

写一个Servlet Wizard,这是服务器端的 :

package:cn.itcase.web.servlet

Name:AServlet

选择 doGet()

点击Next

二、做客户端的响应

写一条代码,打一条辅助语句“helloAJAX!”再做一个客户端的响应:response.getWriter().print“helloAJAX!!!”;没说相应的内容也没有问题,这个是纯文本,不会引发什么问题。

三、写客户端代码

客户端代码:ajax1.jsp,点击按钮后,使服务器的相应显示在这里。此时要请求服务器。

首先给按钮添加监听器:

window.onload = function() {//文档加载完毕后执行

var btn = document. getElementById ("btn");

btn.onclick = function() {//给按钮的点击事 件注册监听。

其次,ajax四步操作,得到服务器的响应,把响应结果显示到h1元素中:

写一个函数,这个函数是创建异步对象:

funation createXMLHttpRequest(){

try{

return new XMLHttpRequest ();//大多数浏览器

} catch (e) {

try

return Actviexobject ("Msxm12. XMLHTTP");//IE6.O

} catch (e) {

try {

return Actviexobject ("Microsoft . XMLHTP");//IE5.5及更早版本} catch (e) {

alert ("哥们儿,您用的是什么浏览器啊? ");

throw e;

1.得到异步对象:var xmlHttp = createXMLHttpRequest() ;

2.打开与服务器的连接:

指定请求方式

指定请求的URL

指定是否为异步请求

xmlHttp.open("GET", "", true) ;

3.发送请求:

xmlHttp.send (null);//GEr请求没有请求体,但也要给出null,不然rirePox可能会不能发送!/*

4.给异步对象的onreadystatechange事件注册监听器:

xmlHttp .onreadystatechange = function() {//当xmlHttp的状态发生 变化时执行

//双重判断: xmlHttp的状态为4(服务器响应结束),以及服务器响应的状态码为200(服务器响应成功)。

if (xm1Http. readyState == 4 && xmlHttp.status == 200) {

初衷是把响应结果显示在h1元素中,所以此时需要:

//获取服务器的响应结束

vartext = xmlHttp responseText;

//获取h1元素

Var h1 = document .getElementById("h1") ;

h1. innerHTML = text;

image.png

四、总结

代码很重要,相较于以前教难。此时Servlet已经执行。服务器相应了,页面局部刷新,这就是ajax。

相关文章
|
2天前
|
数据采集 人工智能 安全
|
12天前
|
云安全 监控 安全
|
4天前
|
自然语言处理 API
万相 Wan2.6 全新升级发布!人人都能当导演的时代来了
通义万相2.6全新升级,支持文生图、图生视频、文生视频,打造电影级创作体验。智能分镜、角色扮演、音画同步,让创意一键成片,大众也能轻松制作高质量短视频。
1036 151
|
3天前
|
编解码 人工智能 机器人
通义万相2.6,模型使用指南
智能分镜 | 多镜头叙事 | 支持15秒视频生成 | 高品质声音生成 | 多人稳定对话
|
17天前
|
机器学习/深度学习 人工智能 自然语言处理
Z-Image:冲击体验上限的下一代图像生成模型
通义实验室推出全新文生图模型Z-Image,以6B参数实现“快、稳、轻、准”突破。Turbo版本仅需8步亚秒级生成,支持16GB显存设备,中英双语理解与文字渲染尤为出色,真实感和美学表现媲美国际顶尖模型,被誉为“最值得关注的开源生图模型之一”。
1727 9
|
9天前
|
人工智能 自然语言处理 API
一句话生成拓扑图!AI+Draw.io 封神开源组合,工具让你的效率爆炸
一句话生成拓扑图!next-ai-draw-io 结合 AI 与 Draw.io,通过自然语言秒出架构图,支持私有部署、免费大模型接口,彻底解放生产力,绘图效率直接爆炸。
679 152
|
11天前
|
人工智能 安全 前端开发
AgentScope Java v1.0 发布,让 Java 开发者轻松构建企业级 Agentic 应用
AgentScope 重磅发布 Java 版本,拥抱企业开发主流技术栈。
640 13
|
5天前
|
SQL 自然语言处理 调度
Agent Skills 的一次工程实践
**本文采用 Agent Skills 实现整体智能体**,开发框架采用 AgentScope,模型使用 **qwen3-max**。Agent Skills 是 Anthropic 新推出的一种有别于mcp server的一种开发方式,用于为 AI **引入可共享的专业技能**。经验封装到**可发现、可复用的能力单元**中,每个技能以文件夹形式存在,包含特定任务的指导性说明(SKILL.md 文件)、脚本代码和资源等 。大模型可以根据需要动态加载这些技能,从而扩展自身的功能。目前不少国内外的一些框架也开始支持此种的开发方式,详细介绍如下。
398 4