AJAX基础学习
Ajax初始
请求
- 初代的请求是将数据放在公共服务器上,通过以下方式让浏览器向服务器发送请求获得后端数据:
地址栏输入地址
特定元素的href属性、src属性
表单提交 form标签中的 action=""属性
缺点:每次向服务器发送请求都会刷新网页
- HTTP请求的方式
AJAX
-
Ajax全写:Asynchronous Javascript And XML(异步JavaScript和XML)
-
Ajax不是新的编程语言,而是一种使用现有标准的新方法
-
Ajax原理:
-
Ajax特点:异步请求,局部更新
Ajax原生写法
1.创建XMLHttpRequest对象
- XMLHttpRequest对象是AJAX的基石
所有现代浏览器都支持 XMLHttpRequest 对象。
XMLHttpRequest 对象可用于在后台与 Web 服务器交换数据。这意味着可以更新网页的部分内容,而无需重新加载整个页面。
- 所有现代浏览器(Chrome、Firefox、IE、Edge、Safari、Opera)都有内置的 XMLHttpRequest 对象
//创建对象
var xhr = new XMLHttpRequest();
2.向服务器发送请求
open(method,url,async)
- open()方法用于创建一个新的HTTP请求,并指定此请求的类型(如GET、POST等)、URL以及验证信息
- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置
url组成:协议://主机[端口号]/路径?参数
作者博客地址为例:https(协议): //blog.csdn.net(主机)/m0_64791593(路径)?type=blog(参数)
- async:true(异步)或 false(同步)
如需异步发送请求,open() 方法的 async 参数必须设置为 true
open()没有真发送请求,只是启动一个请求准备发送,还需要调用send()方法,因此要open()要写在send()之前
send([string])
- send()方法用于发送请求到HTTP服务器并接收回应
- 没有参数传入时,用于GET请求
- 有参数传入时,用于POST请求,将客户端输入的数据发送给服务器
3.得到服务器响应,返回数据,执行函数
- onreadystatechange事件
readyState属性保存了XMLHttpRequest的状态
当readyState发生改变时,会触发onreadystatechange事件
当 readyState 为 4,status 为 200 时,响应就绪,执行后面的操作
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
//repomseText:将响应信息作为字符串返回
}
}