JavaScript实例第十九天

最新推荐文章于 2024-06-07 09:18:52 发布

艰难的路

最新推荐文章于 2024-06-07 09:18:52 发布

阅读量487

点赞数

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

本文链接：https://blog.csdn.net/qq_51649346/article/details/121332836

版权

前端Javascript实例专栏收录该内容

20 篇文章 0 订阅

订阅专栏

2021.11.15

Ajaxa和XMLHttpRequest前文简介

😗
Ajax即异步的JavaScript和XML（可拓展的标记语言），Ajax不是一门编程语言，是指一种前端开发新方法,Ajax特点在于前端页面与后台服务器进行交互的全新方法，通过核心的XMLHttpRequest对象在无须加载整个网页的前提下对网页进行修改，所以Ajax被人定义为“异步方式的JavaScript和XML技术”
XMLHttpRequest对象创建:

var xhr=new XMLHttpRequest();

判断浏览器是否支持XMLHttpRequest对象

var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest()
}
else{
xhr=null;
}

if(xhr!=null){
xhr.onreadystatechange=on_state_change;
xhr.open("GET|POST",url,true);
xhr.send(null);
}else{

}

转载:https://blog.csdn.net/chen_mumu119/article/details/19629587
XMLHttpRequest.open()语法
open(method, url, async, username, password)

各参数的解析：

method 参数是用于请求的 HTTP 方法。

值包括 GET、POST 和 HEAD。

( 不区分大小写。POST：用"POST"方式发送数据,可以大到4MB；GET：用"GET"方式发送数据,只能256KB；如果请求带有参数的化实用POST方式，POST方式将参数放置在页面的隐藏控件内；没有参数使用GET方式；对于请求的页面在中途可能发生更改的，也最好用POST方式)

url 参数是请求的主体。大多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。

async 参数指示请求使用应该异步地执行。如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞，直到响应完全接收。

如果这个参数是 true 或省略，请求是异步的，且通常需要一个 onreadystatechange 事件句柄。

username 和 password 参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格

以下自己的理解：

send用于发送，open的method为get时，一般send为null，当method为post时，send方法的参数就是发送的数据，多种格式的数据都可以作为参数
onreadystatechange对应的是一个函数，在函数的readyState改变时触发，readyState的几个值含义：
0：请求未初始化（还没有调用 open()）。

1：请求已经建立，但是还没有发送（还没有调用 send()）。

2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。

3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。

4：响应已完成；您可以获取并使用服务器的响应了
一般通过在onreadyStatechange对应的函数方法中对readyState具体值来判断程序是否完整正确执行
来看一个小栗子:

实例一、Ajax解析文本

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>XMLHttpRequest</title>
</head>

<body>
	<div id="id-div-ajax" style="">
	<input type="button" onClick="ajax_load_txt_request()" value="通过Ajax解析文本">
		<span>解析文本内容:</span>
		<span id="id-span-ajax-txt"></span>
	</div>
</body>
	<script type="text/javascript">
	var xhr=null;
		function ajax_load_txt_request(){
			if(window.XMLHttpRequest){
				xhr=new XMLHttpRequest();//先判断浏览器是否可用XMLHttpRequest
			}
			else if(window.ActiveXObject){
				xhr=new ActiveXboject;
			}else{
				xhr=null;
				
			}
			if(xhr!=null){
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4){//表示一种“已加载的状态
						if(xhr.status==200){//表示成功收到"ok"
							document.getElementById("id-span-ajax-txt").innerText=xhr.responseText;//xhr.responseText当你像服务端发送一个请求成功时，服务端会返回一串数据给你，这个数据就是responseText
								
							}else{
								console.log("出错原因："+xhr.statusText);//服务器返回的http状态码
							}
					}
					
				}
				xhr.open("get","ajax.txt",true)
				xhr.send(null)
			}else{
				console.log("不支持")
			}
			
		}
		
	</script>
</html>

statue返回的是数字
respobseText返回是字符串

open为get时，url为相对路径，要与html文件在同一级目录下，如果代码无问题在浏览器中打开时无法访问本地文件基本上就是跨域问题了，谷歌、火狐、IE我都试了半天，都是因为跨域问题无法访问本地文件，这是策略问题，没什么办法，百度了一些博主说的办法，都是几年前的方法，都试了下都没用了

艰难的路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实例第十九天

2021.11.15Ajaxa和XMLHttpRequest前文简介????Ajax即异步的JavaScript和XML（可拓展的标记语言），Ajax不是一门编程语言，是指一种前端开发新方法,Ajax特点在于前端页面与后台服务器进行交互的全新方法，通过核心的XMLHttpRequest对象在无须加载整个网页的前提下对网页进行修改，所以Ajax被人定义为“异步方式的JavaScript和XML技术”XMLHttpRequest对象创建:var xhr=new XMLHttpRequest();
复制链接

扫一扫