JAVAWEB学习笔记-AJAX

JAVAWEB学习笔记-AJAX

AJAX

处理的问题
怎么在保留当前页面信息的基础上显示新的信息
使用AJAX


24/3/2020


明确流程

  1. 创建ajax引擎对象
  2. 声明监听函数

a. 判断ajax状态码
b. 判断响应状态码
c. 获取相应信息(普通字符串或者json格式的字符串)
d. 处理响应

  1. 创建并发送ajax请求

a. 创建请求(设置请求方式,设置请求地址,设置异步或者同步)
b. 发送请求

  1. 其他处理

第一个AJAX请求

function testAjax() {
        // ajax请求
        // 创建Ajax引擎对象
        var ajax;
        if (window.XMLHttpRequest) {
            // IE6以下不支持
            ajax = new XMLHttpRequest();
        }
        // 声明时间监听
        ajax.onreadystatechange = function () {
            var data = ajax.responseText;
            // 获取div对象
            var div = document.getElementById("showDiv");
            div.innerHTML = data;
        }
        // 发送请求
        // 创建请求
        ajax.open("get", "my");
        // 发送
        ajax.send(null);
}

流程

创建ajax引擎对象
声明事件监听:监听ajax对象的属性值,一旦readystate的值发生改变就会触发声明的函数的执行
创建并发送ajax请求

AJAX状态码学习

readyState的值
0:表示ajax引擎对象创建
1:表示请求创建但是未发送 ajax.open("get", "my");
2:请求发送 ajax.send(null)
3:正在接收响应的内容
4:响应内容接收完毕

改进

这样看之前的第一个ajax请求就有点冗余性了,用状态码判断对onreadystatechange监听的方法进行修改

ajax.onreadystatechange = function () {
	if (ajax.readystate == 4){
		var data = ajax.responseText;
		// 获取div对象
        	var div = document.getElementById("showDiv");
    		div.innerHTML = data;
	}
}

响应状态码

ajax.status
可能是200 404 500 就是服务器返回的那个状态码
200 正常
404 资源未找到
500 服务器错误

AJAX异步和同步

设置:ajax.open(method,url,ansyc)

method:请求方式

get请求方式

请求数据以?隔开的形式拼接在url的后面
不能写在send里面
ajax.send(null)

post请求方式

如果有请求数据
先设置:
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
再在send里用键值对方式传入
ajax.send("uname=张山&pwd="123")

url:请求地址

ansyc:设置异步或者同步请求

false:同步
true:异步(默认)

异步:当前js函数继续执行,无需等待ajax请求的响应以及响应的处理
同步:当前js函数会等待ajax请求以及响应,当前ajax响应处理完毕后,继续执行函数的剩余代码。

JSON学习

JSON概念

其实json就是js创建对象的一种格式,保证对象中的数据的紧密型和完整性。

JSON格式

var 对象名={
	键名:值,
	键名:值
}

使用:在服务器端响应的数据拼接成json格式的字符串,这样客户端(浏览器)在接收到响应数据后可以使用eval方法将json格式的字符串数据直接转换为对应的js对象,便于数据操作。
服务器拼接,使用Goson工具拼接。

JQuery的AJAX学习

使用流程

// get
$.get("data",{uname:value}, function (data) {
	alert(data);
})

$.get(url, data, fn)
url:请求地址
data:请求参数,参数为json对象
fn:回调函数,函数有一个形参用来接收响应数据
$.post(url, data, fn)
url:请求地址
data:请求参数,参数为json对象
fn:回调函数,函数有一个形参用来接收响应数据
$.ajax(json格式的参数):参数比较多,详情参照api
jQuery API文档地址

Copyright: 采用 知识共享署名4.0 国际许可协议进行许可

Links: https://www.byfree.top/archives/ajax