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。

相关文章
|
存储 缓存 网络协议
你只会用 Java Sockets?推荐 11 个开源的 Java Socket 框架
你只会用 Java Sockets?推荐 11 个开源的 Java Socket 框架
2212 0
|
消息中间件 搜索推荐 Java
消息中间件JMS介绍、入门demo与spring整合
消息中间件JMS介绍、入门demo与spring整合
581 87
消息中间件JMS介绍、入门demo与spring整合
|
机器学习/深度学习 Web App开发 人工智能
全球名校AI课程库(8)| Berkeley伯克利 · 全栈深度学习训练营课程『Full Stack Deep Learnin』
课程以实战为主,讲解了不同场景下应用深度学习解决问题的工具、过程和方法:从问题理解,方法选择、数据管理、选择 GPU 到 Web 部署、监控和再训练。
2548 1
全球名校AI课程库(8)| Berkeley伯克利 · 全栈深度学习训练营课程『Full Stack Deep Learnin』
|
Web App开发 Dart 前端开发
Flutter 第一个程序Hello World!
Flutter 第一个程序Hello World!
474 1
Flutter 第一个程序Hello World!
|
JavaScript 安全 前端开发
Vue如何读取cookie实现路由守卫(检查用户登录状态)
一般实现路由守卫,判断用户的登录状态使用token和cookie验证两种方法,这次项目后端是给我提供的cookie验证,写到这里就记录一下,希望能帮助到你们
952 0
Vue如何读取cookie实现路由守卫(检查用户登录状态)
|
存储 SQL 监控
规则引擎 | 学习笔记
快速学习 规则引擎
1783 0
规则引擎 | 学习笔记
|
资源调度 JavaScript 前端开发
Vue3项目从0-1项目(手把手教学)
Vue3项目从0-1项目(手把手教学)
453 0
Vue3项目从0-1项目(手把手教学)
|
关系型数据库 MySQL 物联网
❤️Windows10环境下Docker安装主从MySQL5.7数据库❤️
❤️Windows10环境下Docker安装主从MySQL5.7数据库❤️
543 0
❤️Windows10环境下Docker安装主从MySQL5.7数据库❤️
|
存储 设计模式 算法
有限状态机FSM
关于状态机,以前写过[用Go实现一个状态机](https://mp.weixin.qq.com/s?__biz=MzUzNzAzMTc3MA==&mid=2247484850&idx=1&sn=5ba31ff066ddeeedab27f9ca9f1b9b58&scene=21#wechat_redirect),只是讲述了如何控制状态的流转,理论上不能算作完整的状态机。
|
XML JSON 文字识别
Android 百度翻译API(详细步骤+源码)
Android 百度翻译API(详细步骤+源码)
1304 0
Android 百度翻译API(详细步骤+源码)