ajax的使用步骤详解
1、引言
就是异步刷新,AJAX要和XMLHttpRequest对象、JavaScript/DOM、CSS、XML一起使用
2、XMLHttpRequest对象
XMLHttpRequest对象,异步的与服务器交换数据,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新
XMLHttpRequest对象是ajax的基础
语法
var xhr = new XMLHttpRequest();
2.1 语法格式
如需将请求发送到服务器,使用XMLHttpRequest()对象的open()、send()方法
send发送的数据,给到open方法的url定义的页面里面
方法 | 描述 |
---|---|
open(method,url,async | 规定请求的类型、URL以及是否异步处理请求。method:请求的类型(GET或者POST);url:文件在服务器上的位置;async:true(异步)或false(同步),这个是默认true的不用设置 |
send(string) | 将请求发送到服务器。string:仅用于POST请求 |
2.2 get请求代码
2.2.1 一个简单的GET请求
<script type="text/javascript">
var xhr = new XMLHttpRequest();xhr.open("get", "data",true);xhr.send();
</script>
其中的data是一个Servlet页面
2.2.2 url加唯一的ID
在上面的例子中,您可能得到的是缓存的结果,为了避免这种情况,向URL添加一个唯一的ID(t=Math.random())
<script type="text/javascript">var xhr = new XMLHttpRequest();xhr.open("get","data?t="+Math.random(),true)xhr.send();
</script>
2.2.3 通过GET方法发送数据
向URL添加信息(username = zhangsan、password = 123)
<script type="text/javascript">var xhr = new XMLHttpRequest();xhr.open("get","data?username=zhangsan&password=123",true)xhr.send();
</script>
2.3 post请求代码
一个简单的POST请求
<script>var xhr = new XMLHttpRequest();//一个简单的POST请求xhr.open("POST","data",true);xhr.send();
</script>
如果需要像html的form表单那样post数据,请使用setRequestHeader()添加HTTP头,在send()方法中规定发送的数据
<script>var xhr = new XMLHttpRequest();xhr.open("POST","data",true);xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");xhr.send("username=zhangsan&password=123");
</script>
2.4 readyState
语法
<script type="text/javascript">var xhr = new XMLHttpRequest();xhr.open("get", "data",true);xhr.send();xhr.onreadystatechange = () => {if (xhr.readyState == 4 && xhr.status == 200) {alert(xhr.responseText);}}
</script>
每当readyState改变时,就会触发。onreadystatechange事件
在onreadystatechange事件中,添加任务
readyState属性存有XMLHttpRequest的状态信息
当readyState等于4且状态为200时,表示响应以就绪
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数名),每当readyState属性改变时,就会调用该函数。 |
readyState | 存有XMLHttpRequest的状态。从0到4发生变化。0:请求未初始 1:服务器连接已建立 2:请求已接收 3:请求处理中 4:请求已完成,且响应已就绪 |
status | 例:200:“OK”;404:未找到页面 |
3、例题1–用alert在浏览器输出servlet页面定义的字符串
servlet页面代码
@WebServlet(name = "DataServlet", value = "/data")
public class DataServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=utf-8");String mess = "刘雨昕新歌未知计划上线啦!!!!";PrintWriter printWriter = response.getWriter();printWriter.write(mess);printWriter.flush();printWriter.close();}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}
}
html页面代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script type="text/javascript">var xhr = new XMLHttpRequest();xhr.open("post", "data",true);xhr.send();xhr.onreadystatechange = () => {if (xhr.readyState == 4 && xhr.status == 200) {alert(xhr.responseText);}}
</script>
</body>
</html>
四、post例题
点击显示div内容
@WebServlet(name = "DataServlet", value = "/data")
public class DataServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=utf-8");String name = request.getParameter("name");String pwd = request.getParameter("pwd");PrintWriter printWriter = response.getWriter();printWriter.write("name:"+name+",password:"+pwd);printWriter.flush();printWriter.close();}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#div1 {width: 200px;height: 100px;border: solid 2px rgba(255, 43, 10, 0.96);}</style>
</head>
<body>
<button id="btn">点击显示div</button>
<div id="div1"></div>
<script type="text/javascript">var xhr = new XMLHttpRequest();xhr.open("post", "data", true);xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xhr.send("name=zhangsan&pwd=123");var div = document.getElementById("div1");var btn = document.getElementById("btn");btn.addEventListener('click', () => {div.innerText = xhr.responseText;})</script>
</body>
</html>
ajax的使用步骤详解相关推荐
- ajax.request函数使用详解
ajax.request函数使用详解 Ajax.Request ? Ajax.Request( url, { method:method, parameters:para, postBody:xmlS ...
- 服务器oracle11g卸载,卸载Oracle11g步骤详解
卸载Oracle11g步骤详解 用Oracle自带的卸载程序不能从根本上卸载Oracle,从而为下次的安装留下隐患,那么怎么才能完全卸载Oracle呢? 那就是直接注册表清除,步骤如下: 1. 开始- ...
- mysql 获取当前整点_Oracle 生成未来三天的整点时间(步骤详解)
需求:X坐标轴时间都为整点时间,展示未来三天内的预测(x轴展示未来三天的整点时间),每3个小时一个刻度,横坐标共计24个刻度 步骤一:取当前时间 SELECT SYSDATE FROM DUAL 步骤 ...
- php自动加载类与路由,PHP实现路由与类自动加载步骤详解
这次给大家带来PHP实现路由与类自动加载步骤详解,PHP实现路由与类自动加载步骤详解的注意事项有哪些,下面就是实战案例,一起来看一下. 项目目录如下 入口文件index.php<?php def ...
- 2013河北省职称计算机应用能力考试操作题答案,2013河北省职称计算机应用能力考试操作题步骤详解(部分).doc...
2013河北省职称计算机应用能力考试操作题步骤详解(部分) 2013河北省职称计算机应用能力考试操作题步骤详解PAGE PAGE - 11 - 共 NUMPAGES 11页操作题PPT 1-5PPT操 ...
- idea 执行java maven,IDEA的run maven方式启动步骤详解
安装jetty插件 1. 找到Plugins,查找jetty插件,安装"IDEA Jetty Runner",安装好后重启IDEA 安装插件:Maven Helper 方法同Jet ...
- Eclipse编译运行Native代码步骤详解
Eclipse编译运行Native代码步骤详解 标签: android jni层 android jni步骤 android jni接口 转自: http://blog.csdn.net/ ...
- python画三维平面-Python 绘制酷炫的三维图步骤详解
通常我们用 Python 绘制的都是二维平面图,但有时也需要绘制三维场景图,比如像下面这样的: 这些图怎么做出来呢?今天就来分享下如何一步步绘制出三维矢量(SVG)图. 八面体 我们先以下面这个八面体 ...
- 电脑安装python步骤-python3.8下载及安装步骤详解
1.操作系统:Windows7 64bit executable installer 2.安装步骤: 双击安装文件python-3.8.0-amd64.exe 勾选下方"Add Python ...
最新文章
- 大厂面试录取通过率不到3%,我真是太太太难了......
- 对PostgreSQL的 ctid 的初步认识
- 使用乱序标签来控制HTML的输出效果
- 最近在InfoQ上翻译的几篇文章
- Microsoft Azure Remoteapp使用自定义镜像创建桌面服务
- 放弃高考“打游戏”,别人25岁年入百万、我退役后回家修车
- Java设计模式学习总结(8)——结构型模式之桥接模式
- C++ const使用情况总结
- 为什么打不过滴滴的Uber也要做无人驾驶?
- 怎样用调用资源管理器explore.exe打开指定的文件夹
- 打线上包 测试_vue-cli项目分别打测试包(test)和生产包(prod)
- mybatis update不生效_08. mybatis一级缓存和二级缓存
- 脑智前沿科普:脑深部电刺激治疗帕金森病的原理
- 入手Kindle DX
- 【Web前端】儿童摄影网——网页制作代码
- mac 安装redis 视频教程
- js生成execl表格
- css+svg实现的定宽高比
- framework7 入门知识
- python摇骰子游戏小案例