Ajax介绍

最新推荐文章于 2024-02-17 13:45:00 发布

vainly_hope

最新推荐文章于 2024-02-17 13:45:00 发布

阅读量70

点赞数

文章标签： ajax javascript

本文链接：https://blog.csdn.net/vainly_hope/article/details/119925431

版权

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

Ajax并不是一门新的语言它其实就是基于JS写的一个功能模块而已。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

前端向后端发送请求的方式：

1、直接在浏览器地址栏输入URL访问 GET请求

2、点击a标签跳转到指定页面 GET请求

3、Form表单 GET请求或POST请求

4、AJAX 所有请求方式

AJAX的关键点：局部刷新，异步请求

原生AJAX代码

// 1. 生成AJAX实例对象
var ajax = new XMLHttpRequest();
// 2. 规划Http请求
ajax.open(method请求方式, URL请求地址, 同异步 同步 false 异步 true 默认 true);
// 3. 发送Http请求
ajax.send();
// 4. 接收后端返回的数据
ajax.responseText;

异步AJAX需要监听 readyState 状态

readyState状态分为：

0.实例化了XML对象，没有调用OPEN方法

1.调用了OPEN方法，没有调用send方法

2.调用了send方法，请求发送出去

3.可以接收到部分响应数据

4.已经接收到全部数据，连接已经关闭

异步AJAX代码

// 1. 生成AJAX实例对象
var ajax = new XMLHttpRequest();
// 2. 规划Http请求
ajax.open(method请求方式, URL请求地址, 同异步 同步 false 异步 true 默认 true);
// 3. 监听请求状态改变
ajax.onreadystatechange = function() {
    if (ajax.readyState === 4) {
        if (ajax.status === 200) {
            ajax.responseText;
        }
    }
}
// 4. 发送Http请求
ajax.send();

JSNop 解决跨域问题

<html lang="en">



<head>


    <meta charset="UTF-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <title>Document</title>

</head>



<body>

    <script>


    // Ajax  异步的JavaScript和XML

    // 在不刷新页面的情况下去发送http强求

    // CORS跨域报错（后端解决）  同源组策略  协议 主机 端口要相同  三者有一个不同，就会产生跨域报错



    // JSONP 

    // 是为了解决跨域问题

    // 实现  ：

    // 前端:事先声明一个回调函数，利用script 标签向后端发送一条http请求，将回调函数的函数名 通过参数callback传递给后端

    // 后端：接收到前端的请求后，解析请求参数callback，返回给前端一段执行函数的代码 将传递的参数以实参的形式传递给前端（简言之：前端的函数，后端调）  

    

    // 注意事项

    // 1.JSONP不是Ajax

    // 2.JSONP 只支持 get请求，不支持POST （只有get支持）

    // 3.JSONP 不是一个标准的技术，算是一个黑科技

    // 4.JSONP 需要前后端共同完成



    // 地址组成

    // 协议://主机号://端口//路径？key=value&key=value（get请求的参数）



    // get请求传递参数 ？key=value



    // 1.创建XML实例对象

    var ajax = new XMLHttpRequest();

    // 2.规划一条http请求

    ajax.open('GET', 'http://192.168.2.103:8000/test', 'false');

    //3.发送Http请求

    ajax.send();

    // 4.查看返回的数据

    console.log(ajax.response);

    function fn() {



    }

  </script>

  <!--后端接受到前端发送的请求 解析callback参数的值 拿到fn

    后端会拿到一个 //test?callback=fn 这样一段字符串 需要将这段字符串拆分拿到fn

    var url=request.url;

    截取？后面的字符串

    url= url.substring(url.indexOf('?')+1)

    var arr=url.split('sepatator''=');

    var obj={};

    obj[arr[0]]=arr[1];

    console.log(obj);



    response.end(obj.callback); //返回一个字符串fn

   -->
 <!-- <script></script>的作用：是解析js代码 -->

  <!-- <link rel="stylesheet" href="">解析css代码 -->

  <!-- <img src="" alt="">把别人的二进制代码解析成图片 -->

  <!-- 标签具有特性，它发请求不会出现同源组策略 -->

</body>



</html>

vainly_hope

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax介绍

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。Ajax并不是一门新的语言它其实就是基于JS写的一个功能模块而已。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）。AJAX 不需要任何浏览器插件，但需要用户允许Ja
复制链接

扫一扫