JS原生AJAX

weixin_49085046

已于 2025-02-23 21:51:08 修改

阅读量768

点赞数 2

分类专栏： js 文章标签： javascript ajax

于 2021-08-03 00:32:45 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_49085046/article/details/119336373

版权

js 专栏收录该内容

5 篇文章

订阅专栏

一、什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。

二、Ajax的原理：

简单来说就是通过XmlHttpRequest对象向服务器发异步请求，从服务器获得数据，然后用 javascript 来操作DOM更新页面的技术。

1、创建 XMLHttpRequest 对象：
使用 new XMLHttpRequest() 创建一个 XHR 对象。

2、配置请求：
使用 open() 方法设置请求方法（如 GET、POST）和 URL。

3、发送请求：
使用 send() 方法发送请求。如果是 POST 请求，可以将数据作为参数传递给 send()。

4、监听状态变化：
通过 onreadystatechange 事件监听请求状态的变化。

5、处理响应：
当请求完成时（readyState 为 4），检查 status 状态码，处理服务器返回的数据。

//创建 XMLHttpRequest 对象
var ajax = new XMLHttpRequest();
//规定请求的类型、URL 以及是否异步处理请求。
ajax.open('GET',url,true);
//发送信息至服务器时内容编码类型
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
//发送请求
ajax.send(null);  
//接受服务器响应数据
ajax.onreadystatechange = function () {
    if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) { 
    }
};

4、:json字符串转换集json对象、json对象转换json字符串

//字符串转对象
JSON.parse(json)
eval('(' + jsonstr + ')')   
// 对象转字符串
JSON.stringify(json)

5、ajax几种请求方式？他们的优缺点？
常用的post,get,delete。不常用copy、head、link等等。

代码上的区别

1:get通过url传递参数
2:post设置请求头  规定请求数据类型

使用上的区别

1:post比get安全
(因为post参数在请求体中。get参数在url上面)
2:get传输速度比post快 根据传参决定的。
(post通过请求体传参，后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)
3:post传输文件大理论没有限制 get传输文件小大概7-8k ie4k左右
4:get获取数据 post上传数据
(上传的数据比较多 而且上传数据都是重要数据。所以不论在安全性还是数据量级 post是最好的选择)

6、什么情况造成跨域？
同源策略限制不同源会造成跨域。以下任意一种情况不同，都是不同源。
Alt

7、跨域解决方案有哪些？参考跨域解决方案.
1、通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

1）JSONP跨域

jsonp 的原理就是利用 <script>标签没有跨域限制，通过 <script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);

    // 回调执行函数
    function handleCallback(res) {
        alert(JSON.stringify(res));
    }
 </script>