JS中的ajax

最新推荐文章于 2023-04-10 10:17:36 发布

oop玩家

最新推荐文章于 2023-04-10 10:17:36 发布

阅读量1.3k

点赞数 1

文章标签： ajax javascript

本文链接：https://blog.csdn.net/weixin_55309235/article/details/119856499

版权

Ajax
–1,概述
Ajax 即Asynchronous Javascript And XML( 异步的JS和XML )

Ajax是多种技术的综合应用

Ajax是客户端的技术，它可以实现局部刷新网页

Ajax 可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页

ajax优势: 异步访问(加快响应速度,不必等待),局部刷新(不必刷新整个网页,只是局部刷新)

异步原因;代理-->有Ajax引擎

步骤:

1.用户将请求发送给Ajax引擎,之后JS继续向下执行

2.Ajax引擎接收用户请求之后,通过代理的方式访问后端服务器

3.后端服务器接收请求之后,执行业务操作,最终将响应结果返回给Ajax引擎

4.Ajax引擎通过回调函数的方式返回给用户数据

AJAX编程步骤

1.创建XMLHttpRequest对象
2.设置请求方式
3.调用回调函数
4.发送请求
5.处理返回的结果

属性

readyState:
0:为初始化已经创建好了XMLHttpRequest对象xml 但是还没有初始化
1：已经初始化好了XMLHttpRequest对象xml 准备好要发送了
2：send被调用请求已经发送但是还没有收到服务器的响应
3：浏览器正在接受服务器发送过来的请求但是还没有接受完
4：浏览器已经接受请求完毕
responseText:
服务器返回的响应文本
responseXml：
服务器返回的响应xml
status
服务器的http状态码
statusText
服务器的http状态原因文本

方法：

open("方法",url,是否异步)
send(参数) 参数为向服务器传递的数据如果是get的话参数为null
onreadystatechange=function(){} 当xml的readyState发生改变的时候就会调用，所以在这个过程中onreadystatechange总共会被调用5次

实例:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Ajax实例</title>

<script type="text/javascript">
//初始化一个存储XMLHttpRequest对象的变量
var xhr = null;
//定义一个函数用来创建XMLHttpRequest对象,兼容各个版本
function CreatXHR() {
//判断浏览器是否支持ActiveX控件，针对IE6及之前版本
if (window.ActiveXObject) {
//将所有可能出现的ActiveXObject版本都放在一个数组中
var arrXHR = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
//通过循环创建XMLHttpRequest对象
var temp = arrXHR.length;
for (var i=0;i<temp;i++) {
try {
//创建XMLHttpRequest对象
xhr = new ActiveXObject(arrXHR[i]);
//如果创建XMLHttpRequest对象成功，则跳出循环
break;
}
catch(ex) {
}
}
}
//判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7，Firefox，Opera等浏览器
else if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
}
//响应XMLHttpRequest对象状态变化的函数
function httpStateChange() {
if (xhr.readyState==4) {//异步调用完毕
if (xhr.status==200 || xhr.status==0) {//异步调用成功，在本机上调试
//获得服务器返回的数据
var Names = xhr.responseText;

//把获取到的一个字符串分割成字符串数组。
var arrName = Names.split(";");
//定义一个变量，用于判断用户名是否已经存在
var Flag = false;
for(i=0;i<arrName.length;i++) {
if (arrName[i]== Form.Name.value) {
Flag = true;//用户名存在
break;
}
}
//合法性验证提醒
var OWarn = document.getElementById("Warn");
if (Flag) {
OWarn.innerHTML = "您输入的用户名已存在，请重新输入！";
Form.Btn.disabled = true;//提交按钮不可用
}
else {
OWarn.innerHTML = "合法用户名";
Form.Btn.disabled = false;//提交按钮可用
}
}
}
}
//校验用户名是否有效
function check() {
//创建XMLHttpRequest对象，调用前面定义好的函数
CreatXHR();
if (xhr!=null) {
//创建响应XMLHttpRequest对象状态变化的函数
xhr.onreadystatechange = httpStateChange;
//创建http请求
xhr.open("get","Readme.txt", true);
//发送http请求
xhr.send(null);
}
else {
alert("浏览器不支持XMLHTTP");
}
}
</script>
</head>
<body>
<div class="abc" style="margin-top: 60px;margin-left:90px;">
<h3>ajax异步访问局部刷新</h3>
<form name="Form">
用户名: <input type="text" name="Name" οnblur="check()">
<br>
密　码: <input type="text" name="Password"><br>
<input type="submit" value=" 提交" name="Btn" >
</form>
</div>
</body>

</html>

oop玩家

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS中的ajax

Ajax–1,概述Ajax 即Asynchronous Javascript And XML( 异步的JS和XML )Ajax是多种技术的综合应用Ajax是客户端的技术，它可以实现局部刷新网页Ajax 可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页ajax优势: 异步访问(加快响应速度,不必等待),局部刷新(不必刷新整个网页,只是局部刷新)AJAX编程步骤1.创建XMLHttpRequest对象2.设置请求方式3.调用回调函数4.发送请求5.处理
复制链接

扫一扫