Web阶段 - AJAX学习总结

高超不爱笑

已于 2022-11-24 09:33:28 修改

阅读量167

点赞数

分类专栏：前端文章标签： ajax javascript

于 2020-06-23 15:11:06 首次发布

本文链接：https://blog.csdn.net/weixin_45453240/article/details/106916639

版权

前端专栏收录该内容

7 篇文章

订阅专栏

概述

AJAX即异步的JavaScript和XML,是允许浏览器与服务器通信而无需刷新当前页面的技术,是浏览器提供的API,通过js调用,实现前端代码控制请求与响应来实现网络编程
步骤
1.创建xhr对象 2.发送请求并传递参数 3.处理响应,更新页面局部

创建XHR对象

var xhr = new XMLHttpRequest() //实例化XHR(发送请求类)

XHR对象属性

readyState //表示XMLHttpRequest的状态
为0时表示请求未初始化

当前状态	描述
0	请求未初始化,还没有调用open()方法
1	服务器连接已建立,open()方法已调用,send()方法没调用
2	请求已接收,send()方法已调用,获取到状态行与响应头
3	服务器发送响应,获取到responseText部分数据
4	响应体下载完成,可使用responseText

xhr.onreadystatechange = function(){ ~ } //存储函数,每当readyState的属性改变时触发该函数
responseText //服务器以文本形式返回响应
responseXML //服务器以XML格式返回响应
status //数字形式的服务器状态,例404
statusText //字符串形式的服务器状态,例Not Found
onload //h5提供,相当于readyState=4时触发

XHR对象方法
- void open(“method”,“URL”) //以指定方式和URL的请求建立对服务器的调用,method可设置为get或post,get方法更快数据量小更适合取数据,post方法更稳定数据量大更适合提交数据
- void open(“method”,“URL”,“async”) //open方法的重载,增加是否同异步,async设置为true则开启异步
- void open(“method”,“URL”,“async”,“username”,“password”) //open方法的重载,增加用户名和密码
- void send([“content”]) //发送获取请求,设置请求体
- setRequestHeader(“header”,“value”) //设置请求体头
- abort() //取消当前请求
- getAllResponseHeaders() //以字符串形式返回完整的HTTP响应头信息
- getResponseHeader(“headerName”) //返回指定HTTP响应头信息

返回数据格式

HTML格式
document.getElementById(“id值”).innerHTML = xhr.responseText;//获取后直接使用
XML格式
var result = xhr.responseXML;//返回xml文档,不能直接使用
document.getElementByTagName(“标签名”)[0].firstChild.nodeValue;//通过js方法解析内容
JSON格式
var result = xhr.responseText;//获取JSON字符串
var object = eval(“(” + result + “)”)//转成JSON对象
object.JSON对象名.属性名//获取属性值

jQuery – AJAX

底层接口
$.ajax(url,[settings配置选型])

//例
$.ajax({
			url:'',
			type:'get/post',
			data:{id:1,name:a,...},//传参
			success:function(参数){ ~ },//成功执行函数
			dataType:'json',//设置响应体类型
			error:function(参数){ ~ },//失败执行函数
			complete:function(参数){ ~ },//请求完成则执行
			beforeSend:function(参数){ ~ }//open之前执行
})

$(“选择器”).load(“URL”[,“data”,“callback”]) //从服务器加载数据并把返回的数据放入被选元素中
data参数:object类型,发送到服务器的key/value数据
callback参数:回调函数,请求完成时执行,function(responseTxt调用成功时结果内容,statusTxt调用状态,xhr){}
常用函数
- $.get(“URL”[,“data”,“success成功才执行函数”]) //GET方式从服务器请求数据
- $.post(“URL”[,“data”,“callback”]) //POST方式从服务器请求数据或向指定的资源提交要处理的数据
- $.getJSON(“URL”[,“data”,“callback”]) //GET方式从服务器请求JSON数据
事件
- $(document).ajaxStart( 函数 ) //ajax发出请求则执行
- $(document).ajaxStop( 函数 ) //ajax请求结束则执行
- 引入nprogress.js插件,可用进度条显示,使用Nprogress.start()或Nprogress.done()

使用Jackson

导入相应jar包
创建 org.codehaus.jackson.map.ObjectMapper对象
调用ObjectMapper对象的writeValueAsString(实体类)把java对象或集合转成JSON字符串
注:Jackson根据getter来定位Json对象属性而不是字段,可以在实体类的getter()上加注解,再转为json对象时以忽略该属性

JSONP

ajax只有在同源策略(域名,协议,端口完全相同)时才能使用,跨域请求需使用JSONP或在服务器中加允许跨域header(‘access-Control-Allow-Origin:*或特定地址’)
JSONP是如何实现跨域访问的？
本质上是利用HTML元素的src属性都可以跨域的思路来解决的,如：img,script,iframe,link等标记的src属性的值都可以赋成其它域名的合法地址

<script>
	document.getElementById('#btn').click(function(){
			var frame = document.createElement('script');
			frame.src = "不同源地址?参数&callback=func";
			document.body.appendChild(frame);//发请求
			function func(res){
				//随机函数名
				var function = 'jsonp'+ Math.random().toString().substr(2,5);
				Window[function]:function(data){//data接受响应,:前为别名
					callback(data);
					delete Window[function];
					document.body.removeChild(frame);
				}
			}
	});
</script>
<button id="btn">点击</button>