欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Ajax原理分析(涉及回调函数及异步请求,跨域)

程序员文章站 2022-03-07 13:43:24
Ajax原理分析AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下(所谓局部刷新)。核心对象:XMLHttpRequest这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口,使得浏览器可以发出HTTP请求与接收HTTP响应,实现在页面不刷新的情况下和服务端进行数据交互。Ajax工作原理......

Ajax原理分析

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下(所谓局部刷新)。
核心对象:XMLHttpRequest
这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口,使得浏览器可以发出HTTP请求与接收HTTP响应,实现在页面不刷新的情况下和服务端进行数据交互。

Ajax实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","http://backend.hft.jajabjbj.top/htodo/v1/users",true);
	xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>

Ajax原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
这样极大的提高了站点的性能,无需每次重载整个页面,只刷新局部

XMLHttpRequest 对象的三个常用的属性

  1. onreadystatechange 属性
    onreadystatechange 属性存有处理服务器响应的函数。
xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}

2.readyState 属性
readyState 属性存有服务器响应的状态信息
当readyState发生变化是,就会触发上述onreadystatechange中的函数,

状态 描述
0 请求未初始化(在调用 open() 之前)
1 请求已提出(调用 send() 之前)
2 请求已发送(这里通常可以从响应得到内容头部)
3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
4 请求已完成(可以访问服务器响应并使用它)

使用最多的就是4,来判断是否请求完成。

  1. responseText 属性
    可以通过 responseText 属性来取回由服务器返回的数据
    当ready===4时,就是通过responseText获取服务器返回的数据,并渲染到页面上。

xmlhttprequst的方法

xmlhttp.open("GET","http://backend.hft.jajabjbj.top/htodo/v1/users",true);
	xmlhttp.send();

1.open()
三个参数:1.发生请求的方法,get等 2.url,请求服务器的url,3.Boolean 是否作为异步处理
谷歌浏览器 url只能请求服务器数据,不能请求本地文件数据,如需请求本地数据使用jquery
因为Chrome禁止本地浏览时加载本地其他文件,可以采用添加启动参数的方式来支持

2.send()
将请求发往服务器

其他不常用

注意点

1.如果open第三个参数为true,就是异步请求,需要采取回调函数,

//注册回调函数
xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            var obj = document.getElementById(id);
            obj.innerHTML = xmlHttp.responseText;
        } else {
            alert("AJAX服务器返回错误!");
        }
    }

那么回调函数是什么呢:回调是作为参数传递给另一个函数并在其父函数完成后执行的函数。

$.get('ajax/text.html',function(data){
        $('.result').html(data)
        alert('success')
    })

那么为什么要使用回调函数:js为单线程,带来了方便,不用处理各个线程之间的通信,js只能一件一件事的去做,所以js的事件都像排队一样处理,但是如果一个事件花费很多事情,后面的任务都在等待,出现浏览器假死。
所以js开发出异步模式
每个异步任务都有自己的回调函数,当异步任务完成后,不会马上执行后面的任务,而是执行回调函数,只要触发回调函数,就会向下执行任务。

2.xmlHttp.status
服务器返回的结果

status 描述
1xx 信息
2xx 成功
3xx 重定向
4xx 请求包含一个错误语法或不能完成
5xx 服务器执行一个完全有效请求失败
100 客户必须继续发出请求
101 交换协议
200 请求成功
201 请求已经被实现
202 服务器已接受请求
203 非权威信息
204 没有内容
205 重置内容
206 部分内容
300 多种选择
301 永久移动
302 找到
303 参见其他
304 未修改
305 使用代理
306 未使用
307 暂时重定向
400 错误的请求
401 未授权
402 付费请求
403 禁止
404 未找到
405 方法不允许
406 不可接受
408 请求超时
500 内部服务器错误
501 未实现
502 错误的网关
503 服务不可用
504 网关超时
505 HTTP版本不支持

3.同源策略
如果不是同一个域名同一个端口同一个协议,就不能发送AJAX请求。只有AJAX不允许,form,img,script,link都允许
为什么要有同源策略:form发请求后页面会自动刷新,原来的页面就回收了,没有办法拿到新页面的内容。而AJAX可以拿到响应的内容

解决:
1.突破同源策略就是跨域CORS(Cross-Origin Resource Sharing跨站资源共享)
CORS可以告诉浏览器,我俩一家的不要阻止他
实现:
服务器端加个请求头

//加该请求头header('Access-Control-Allow-Origin:* ')

const express = require('express');
const app = express();

//设置允许跨域访问该服务.
app.all('*', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    //Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    res.header('Access-Control-Allow-Headers', 'X-Requested-with');
    res.header('Access-Control-Allow-Methods', '*');
    next();
});

2.Query中$.ajax的get方法,是支持跨域访问的,不过dataType要设定为“jsonp”
Jsonp(JSON with Padding)是 json 的一种“使用模式”,可以让网页从别的网域获取资料。
jsonp是采用的js的回调机制来实现的,
使用jsonp的方式,是需要后端配合的,否则会出现跨域问题Cross-Origin Read Blocking (CORB)

$.ajax({ 
  		url: 'http://backend.hft.jajabjbj.top/htodo/v1/users',
  		type: "GET", 
  		dataType: 'jsonp', 
  		success: function (json) {
    		//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数 
    		console.log(json)
  		}, 
  		error: function (){
    		console.log("请求失败!"); 
   		}
	});

本文地址:https://blog.csdn.net/weixin_44749729/article/details/107459231

相关标签: javascript