JAVAScript——AJAX异步更新

it2024-08-06 43

什么是AJAX?

简称：ASynchronous JavaScript And XML —— 异步的JavaScript 和 XMLAJAX 是在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的艺术。

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术——通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

同步和异步的区别

异步和同步：客户端和服务器端相互通信的基础上

同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。异步客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。 <script type="text/javascript"> var age01 = 20; var age02 = 40 var str01 = "小明今年"+age01+"岁了，小明爸爸今年"+age02+"岁了"; // alert(str01) var str02 = `小明今年${age01}岁，小明爸爸今年${age02}岁` alert(str02) </script>

AJAX的实现

创建Ajax对象：XMLHttpRequest 对象 —— 用于在后台与服务器交换数据。请求后台：向服务器发送请求如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法 3.接收后台返回的JSON数据：服务器响应如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 。

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

<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>天气预报</h1> <button type="button" onclick="sendMes()">明日天气</button> </body> </html> <script type="text/javascript"> // 1. 创建AJAX对象 var xmlhttp = new XMLHttpRequest() // 2. 发送请求 function sendMes() { xmlhttp.open("GET", "http://wthrcdn.etouch.cn/weather_mini?city=西安", true); xmlhttp.send(); // 3. 接收服务端传回的JSON数据 xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var jsonstr = xmlhttp.responseText; var jsonobj = JSON.parse(jsonstr) alert(jsonobj.desc) } } } </script>

AJAX之get请求

创建对象打开后台接口发送请求接收传回的json信息 <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button" onclick="getJoke()">点击获得一个笑话</button> </body> </html> <script type="text/javascript"> function getJoke() { // 1. 创建对象 var xmlhttp = new XMLHttpRequest // 2. 打开后台接口 xmlhttp.open("GET", "https://autumnfish.cn/api/joke/list?num=1", true) // 3. 发送请求 xmlhttp.send() // 4. 接收传回的json数据 xmlhttp.onreadystatechange = function() { //判断readyState就绪状态是否为4，判断status响应状态码是否为200 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //获取服务器的响应结果 var responseText = xmlhttp.responseText; //alert(responseText); var obj = JSON.parse(responseText); var text = obj.jokes[0] var bo = document.body bo.innerText = text } } } </script>

简写

AJAX之post请求

创建ajax对象打开后台接口设置请求头信息发送请求接收传回的json数据 <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button" onclick="Post()">点击获得post请求，来自后台</button> </body> </html> <script type="text/javascript"> function Post() { // 1. 创建对象 var xmlhttp = new XMLHttpRequest // 2. 打开后台接口 xmlhttp.open("POST", "http://localhost:8080/login", true) // 3.设置请求头信息 xmlhttp.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); // 4. 发送请求 xmlhttp.send("username=Tom&password=111111") // 5. 接收传回的json数据 xmlhttp.onreadystatechange = function() { //判断readyState就绪状态是否为4，判断status响应状态码是否为200 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //获取服务器的响应结果 var responseText = xmlhttp.responseText; alert(responseText) } } } </script>

直接请求json数据

最新回复(0)