ajax中关于xhr属性和方法以及实例并且请求github接口

最新推荐文章于 2024-03-24 19:52:57 发布

栗鼠怪

最新推荐文章于 2024-03-24 19:52:57 发布

阅读量730

点赞数

文章标签： ajax js

本文链接：https://blog.csdn.net/qq_43319797/article/details/105343761

版权

以下是收集的一些xhr对象实例的配置项，属性和方法
一、配置项
也就是对xhr对象进行配置。
① timeout ：配置请求超时时间。
② withCredentials：是否携带发送提供凭据，在下面会进行详细的说明。
二、属性项
也就是指一些请求发送或完成过程中可能会被用户读取或使用到的一些值。
① readyState：xhr的状态码。
② status：http状态码。
③ statusText：http状态说明文本。
④ response：响应。
⑤ responseType：响应类型。
⑥ responseURL：响应的URL路径。
⑦ responseText：响应的文本数据。
⑧ responseXML：响应的XML数据。
⑨ upload：上传对象，在下面会详细说明。
三、方法项
就是可以通过这些方法进行一些交互，如发送请求，获取或设置头部信息等等。
① open：打开一个xhr请求。
② setRequestHeader：设置请求头信息。
③ send：发送请求。
④ abort：中断请求。
⑤ getResponseHeader：获取某一响应头内容。
⑥ getAllResponseHeaders：获取所有响应头内容。
⑦ overrideMimeType：覆盖服务器返回的MIME类型。
xhr对象还有一些例如addEventListener、removeEventListener等等的方法，由于和xhr没太大联系，所以这里就不再写出来了。
四、回调项
回调项的作用是用来当xhr对象发送一些变化的时候来触发某些操作使用的。
① onabort：发生中断事件。
② onerror：产生了错误。
③ ontimeout：请求超时了。
④ onreadystatechange：xhr状态码发生了改变。
⑤ onloadstart：当process开始的时候。（关于procress我们在后面再说）
⑥ onprogress：每次progress正在进行的时候。
⑦ onload：每次progress成功的时候。
⑧ onloadend：当process结束的时候。

下面是关于ajax请求数据的一个代码展示

<body>
    <button id="button">请求github数据</button>
	<div id="users"></div>
	<script type="text/javascript">
		document.getElementById('button').addEventListener('click',loadUsers);
		function loadUsers(){
			var xhr = new XMLHttpRequest();
            //xhr状态码
            //0：表示实例方法已经生成,open方法已经调用
            //1: open已经调用,send方法未调用
            //2: send已经调用,并且返回了头信息和状态码,但是未返回数据体
            //3: 已经开始接受数据体，但是未接受完
            //4：已经接受完了数据体
            // if(xhr.readyState === 4){
            //     if(xhr.status === 200){
            //status http状态码
            // 200 服务器异常
            // 301 永久移动
            // 302 暂时移动
            // 304 未修改
            // 307 暂时重定向
            // 401 未授权
            // 403 禁止访问
            // 404 未发现网址
            // 500 服务器错误
            //         console.log(xhr.responseText);
            //     }else{
            //         console.log(xhr.responseText);
            //     }
            // }
            // xhr.onerror = function() {
            //     console.log(xhr.statusText)
            // }
            // xhr.open('GET',url,true)
            //xhr.send();
			xhr.open("GET","https://api.github.com/users",true)

			xhr.onload = function(){
				var users = JSON.parse(this.responseText);
				// console.log(users);
				 
				var output = '';

				for(var i in users){
					output  += `
					<div class="users">
						<img src="${users[i].avatar_url}" width="70px" height="70px">
						<ul>
							<li>id:${users[i].id}</li>
							<li>login:${users[i].login}</li>
						</ul>
					</div>
					`;
					document.getElementById('users').innerHTML = output;
				}
			}

			xhr.send()
		}
	</script>
</body>

在这里插入图片描述
以上为请求github接口后展示的页面
如果当中出现错误欢迎大家指正

栗鼠怪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax中关于xhr属性和方法以及实例并且请求github接口

以下是收集的一些xhr对象实例的配置项，属性和方法一、配置项也就是对xhr对象进行配置。① timeout ：配置请求超时时间。② withCredentials：是否携带发送提供凭据，在下面会进行详细的说明。二、属性项也就是指一些请求发送或完成过程中可能会被用户读取或使用到的一些值。① readyState：xhr的状态码。② status：http状态码。③ statusT...
复制链接

扫一扫