前端JS知识要点总结（9）-优快云博客

本文链接：https://blog.youkuaiyun.com/wufan2304/article/details/75635178

本文介绍如何手动实现Ajax请求，并深入探讨跨域问题及其解决方案。包括XMLHttpRequest的使用方法、状态码解读及跨域限制与JSONP原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ajax - XMLHttpRequest

知识点：

ajax
XMLHttpRequest
状态码
跨域

状态码说明：
readystate:

0——未初始化，即还没有send
1——已经调用了send，正在发送
2——send完成，相应接收完成
3——正在解析相应内容
4——解析完成，可以调用

status：

2xx——成功
3xx——重定向，会自动跳转
4xx——客户端错误
5xx——服务器端错误

题目二十八：手动编写一个ajax，不依赖第三方库

var xhr = new XMLHttpRequest()
xhr.open('GET', '/api', false)
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4)
        if(xhr.status == 200)
            alert(xhr.responseText)
}
xhr.send(null)

如果是低版本的IE上，使用的是ActiveObject，和W3C方式不同，如果面试官盯着这种老版本浏览器的问题不放，那就可以无视这个公司，这种面试。这种公司如果把你招进去，也很有可能是要让你做这种没有价值的浏览器兼容的维护工作的。

题目二十九：跨域的几种实现方式，原理是什么？

由于浏览器有同源策略，不允许ajax访问其他域的接口

只有当协议，域名，端口号完全相同的时候，才是同源的端口，才能不经过跨域就可访问

http协议的默认端口是80
https协议的默认端口是443

有三个标签是默认允许进行跨域访问的，即：

img，可以用于打点统计网站的访问量
link
script

跨域的注意事项：
所有的跨域请求都是经过信息提供方允许的，如果没有经过允许就可以获取的话，那么就是浏览器的同源策略出现了漏洞了

JSONP的实现原理：
当加载某个链接地址的某个文件的时候，有可能这个文件并不是真实存在的，服务器端根据请求的内容，动态的生成了一个文件，并将其返回给浏览器端，而这个文件中的内容是一个函数。例如下面的形式：

// 文件中的详细内容
doSomething({
    name: 'wufan',
    age: 23,
    school: "Tsinghua University"
})

而这个文件的调用方是通过script外链接到“xxx/api/doSomething.js”的形式实现的，即：

<body>
    <script>
        function doSomething(data) {
            console.log(data)
        }
    </script>
    <script src="xxx/api/doSomething.js"></script>
</body>