前端Ajax概述

最新推荐文章于 2024-09-01 19:13:21 发布
最新推荐文章于 2024-09-01 19:13:21 发布
阅读量356 收藏 1
点赞数
分类专栏： 前端开发笔记 文章标签： Ajax 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45555892/article/details/102693270
版权

Ajsx概述

它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。

1.运行原理、Ajax封装、模板引擎

  1. 创建ajax对象

     var xhr = new XMLHttpRequest();

  2. 告诉 Ajax 请求地址以及请求方式

    xhr.open('get', 'http://www.example.com');

  3. 发送请求

    xhr.send();

  4. 获取服务器端给与客户端的响应数据

     xhr.onload = function () {
     console.log(xhr.responseText);
 }

    ​

服务端响应的数据格式

在真实的项目中，服务器端大多数情况下会以 JSON对象作为响应数据的格式。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中。

在 http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。

JSON.parse() // 将 json 字符串转换为json对象

传递get请求参数

 <script type="text/javascript">
        // 获取按钮元素
        var btn = document.getElementById('btn');
        // 获取姓名文本框
        var username = document.getElementById('username');
        // 获取年龄文本框
        var age = document.getElementById('age');
        // 为按钮添加点击事件
        btn.onclick = function() {
            // 创建ajax对象
            var xhr = new XMLHttpRequest();
            // 获取用户在文本框中输入的值
            var nameValue = username.value;
            var ageValue = age.value;
            // 拼接请求参数
            var params = 'username=' + nameValue + '&age=' + ageValue;
            // 配置ajax对象
            //get请求是不能提交json对象数据格式的
            xhr.open('get', 'http://localhost:3000/get?' + params);
            // 发送请求
            xhr.send();
            // 获取服务器端响应的数据
            xhr.onload = function() {
                console.log(xhr.responseText)
            }
        }
    </script>

传递post请求参数

 <script type="text/javascript">
        // 获取按钮元素
        var btn = document.getElementById('btn');
        // 获取姓名文本框
        var username = document.getElementById('username');
        // 获取年龄文本框
        var age = document.getElementById('age');
        // 为按钮添加点击事件
        btn.onclick = function() {
            // 创建ajax对象
            var xhr = new XMLHttpRequest();
            // 获取用户在文本框中输入的值
            var nameValue = username.value;
            var ageValue = age.value;
            // 拼接请求参数
            var params = 'username=' + nameValue + '&age=' + ageValue;
            // 配置ajax对象
            xhr.open('post', 'http://localhost:3000/post');
            // 设置请求参数格式的类型（post请求必须要设置）
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            // 发送请求
            xhr.send(params);
            // 获取服务器端响应的数据
            xhr.onload = function() {
                console.log(xhr.responseText)
            }
        }
    </script>

请求参数的格式

  1. application/x-www-form-urlencoded

     name=zhangsan&age=20&sex=男

  2. application/json

  {name: 'zhangsan', age: '20', sex: '男'}

Ajax 状态码

在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态码。

<script type="text/javascript">
        var xhr = new XMLHttpRequest();
        //状态码
        // 0 已经创建了ajax对象 但是还没有对ajax对象进行配置
        console.log(xhr.readyState);
        xhr.open('get', 'http://localhost:3000/readystate');
        // 1 已经对ajax对象进行配置 但是还没有发送请求
        console.log(xhr.readyState);

        // onreadystatechange事件 当ajax状态码发生变化的时候触发
        xhr.onreadystatechange = function() {
            // 2 请求已经发送了
            // 3 已经接收到服务器端的部分数据了
            // 4 服务器端的响应数据已经接收完成
            console.log(xhr.readyState);
            // 对ajax状态码进行判断 如果状态码的值为4就代表数据已经接收完成了
            if (xhr.readyState == 4) {
                console.log(xhr.responseText);
            }
        }

        xhr.send();
    </script>

错误处理

  1. 网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。

可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码

​ 2.网络畅通，服务器端没有接收到请求，返回404状态码。

检查请求地址是否错误。

​ 3.网络畅通，服务器端能接收到请求，服务器端返回500状态码。

服务器端错误，找后端程序员进行沟通。

​ 4.网络中断，请求无法发送到服务器端。

会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理

低版本 IE 浏览器的缓存问题

**问题：**在低版本的 IE 浏览器中，Ajax 请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。

**解决方案：**在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同。

xhr.open('get', 'http://www.example.com?t=' + Math.random());

Ajax封装

发送一次请求代码过多，发送多次请求代码冗余且重复

将请求代码封装到函数中，发请求时调用函数即可

 <script>
        function ajax(obj) {
            //存储的是默认值
            var defaults = {
                    type: 'get',
                    url: '',
                    date: {},
                    header: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    success: function() {},
                    error: function() {}
                }
                //使用obj对象中的属性覆盖defaults对象中的属性
            Object.assign(defaults, obj);

            //创建ajax对象
            var xhr = new XMLHttpRequest()
                //拼接请求参数的变量
            var params = ''
                //循环用户传递进来的对象格式参数
            for (var attr in defaults.date) {
                //将参数转换为字符串格式
                params += attr + '=' + defaults.date[attr] + '&'
            }
            //将参数最后面的&截取掉,并重新赋值给params变量
            params = params.substr(0, params.length - 1)
                //判断请求方式
            if (defaults.type == 'get') {
                defaults.url = defaults.url + '?' + params
            }

            //配置ajax对象
            xhr.open(defaults.type, defaults.url)

            //如果请求方式是post
            if (defaults.type == 'post') {
                // 用户希望的向服务器端传递的请求参数的类型
                var ContentType = defaults.header['Content-Type']
                    //设置请求参数格式的类型
                xhr.setRequestHeader('Content-Type', ContentType)
                    // 判断用户希望的请求参数格式的类型
                    // 如果类型为json
                if (ContentType == 'application/json') {
                    // 向服务器端传递json数据格式的参数
                    xhr.send(JSON.stringify(defaults.date))
                } else {
                    // 向服务器端传递普通类型的请求参数
                    xhr.send(params)
                }
            } else {
                xhr.send()
            }
            //监听xhr对象下面的onload事件
            //当xhr对象接收完响应数据后触发
            xhr.onload = function() {
                // 获取响应头中的数据 xhr.getResponseHeader()
                var contentType = xhr.getResponseHeader('Content-Type')
                    //服务器端返回的数据
                var responseText = xhr.responseText

                // 如果响应类型中包含applicaition/json
                if (contentType.includes('application/json')) {
                    //将JSON字符串转换为JSON对象
                    responseText = JSON.parse(responseText)
                }
                // 当http状态码等于200的时候
                if (xhr.status == 200) {
                    // 请求成功 调用处理成功情况的函数
                    defaults.success(responseText)
                } else {
                    // 请求失败 调用处理失败情况的函数
                    defaults.error(responseText, xhr)
                }
            }
        }

        ajax({
            //求情方式
            type: 'get',
            //请求地址
            url: 'http://localhost:3000/responseData',
            success: function(date) {
                console.log('这里是success函数');
                console.log(date);
            },
            error: function(date, xhr) {
                console.log('这里是err函数' + date);
                console.log(xhr);

            }
        })

        /*
			请求参数要考虑的问题
				1.请求参数位置的问题
					将请求参数传递到ajax函数内部, 在函数内部根据请求方式的不同将请求参数放置在不同的位置
					get 放在请求地址的后面
					post 放在send方法中

				2.请求参数格式的问题
					application/x-www-form-urlencoded
						参数名称=参数值&参数名称=参数值
                        name=zhangsan&age=20
                        
					application/json
                        {name: 'zhangsan', age: 20}
                        
					1.传递对象数据类型对于函数的调用者更加友好
					2.在函数内部对象数据类型转换为字符串数据类型更加方便
		*/
    </script>

模板引擎

作用：使用模板引擎提供的模板语法，可以将数据和 HTML 拼接起来。

官方地址：
https://aui.github.io/art-template/zh-cn/index.html

模板引擎使用步骤

 <!-- 1. 将模板引擎的库文件引入到当前页面 -->
    <script src="/js/template-web.js"></script> 

<div id="container"></div>

    <!-- 2.准备art-template模板 -->
    <script type="text/html" id="tpl">
        <h1>{{username}} {{age}}</h1>
    </script>
    <script type="text/javascript">
        // 3.告诉模板引擎将那个数据和哪个模板进行拼接
        // 1) 模板id 2)数据 对象类型
        // 方法的返回值就是拼接好的html字符串
        var html = template('tpl', {
            username: 'zhangsan',
            age: 30
        });
        document.getElementById('container').innerHTML = html;
    </script>

2.formData、同源跨域

FormData 对象的作用

  1. 模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。
  2. 异步上传二进制文件

FormData使用方法

 <!-- 创建普通的html表单 -->
    <form id="form">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="button" id="btn" value="提交">
    </form>
    <script type="text/javascript">
        // 获取按钮
        var btn = document.getElementById('btn');
        // 获取表单
        var form = document.getElementById('form');
        // 为按钮添加点击事件
        btn.onclick = function() {
            // 将普通的html表单转换为表单对象
            var formData = new FormData(form);
            // 创建ajax对象
            var xhr = new XMLHttpRequest();
            // 对ajax对象进行配置
            xhr.open('post', 'http://localhost:3000/formData');
            // 发送ajax请求
            xhr.send(formData);
            // 监听xhr对象下面的onload事件
            xhr.onload = function() {
                // 对象http状态码进行判断
                if (xhr.status == 200) {
                    console.log(xhr.responseText);
                }
            }
        }
    </script>

//入口文件app.js
const formidable = require('formidable');
app.post('/formData', (req, res) => {
    // 创建formidable表单解析对象
    const form = new formidable.IncomingForm();
    // 解析客户端传递过来的FormData对象
    form.parse(req, (err, fields, files) => {
        res.send(fields);
    });
});

注意

  1. Formdata 对象不能用于 get 请求，因为对象需要被传递到 send 方法中，而 get 请求方式的请求参数只能放在请求地址的后面。
  2. 服务器端 bodyParser 模块不能解析 formData 对象表单数据，我们需要使用formidable模块进行解析。

formData 对象的实例方法

  1. 获取表单对象中属性的值

     formData.get('key');

  2. 设置表单对象中属性的值

    formData.set('key', 'value');

  3. 删除表单对象中属性的值

    formData.delete('key');

  4. 向表单对象中追加属性值

    formData.append('key', 'value');

    注意：set 方法与 append 方法的区别是，在属性名已存在的情况下，set 会覆盖已有键名的值，append会保留两个值。

formData二进制文件上传

// 实现文件上传的路由
app.post('/upload', (req, res) => {
    // 创建formidable表单解析对象
    const form = new formidable.IncomingForm();
    // 设置客户端上传文件的存储路径
    form.uploadDir = path.join(__dirname, 'public', 'uploads');
    // 保留上传文件的后缀名字
    form.keepExtensions = true;
    // 解析客户端传递过来的FormData对象
    form.parse(req, (err, fields, files) => {
        // 将客户端传递过来的文件地址响应到客户端
        res.send({
            path: files.attrName.path.split('public')[1]
        });
    });
});

 <div class="container">
        <div class="form-group">
            <label>请选择文件</label>
            <input type="file" id="file">
            <div class="padding" id="box">
                <!--<img src="" class="img-rounded img-responsive">-->
            </div>
            <div class="progress">
                <div class="progress-bar" style="width: 0%;" id="bar">0%</div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        // 获取文件选择控件
        var file = document.getElementById('file');
        // 获取进度条元素
        var bar = document.getElementById('bar');
        // 获取图片容器
        var box = document.getElementById('box');
        // 为文件选择控件添加onchanges事件
        // 在用户选择文件时触发
        file.onchange = function() {
            // 创建空的formData表单对象
            var formData = new FormData();
            // 将用户选择的文件追加到formData表单对象中
            formData.append('attrName', this.files[0]);
            // 创建ajax对象
            var xhr = new XMLHttpRequest();
            // 对ajax对象进行配置
            xhr.open('post', 'http://localhost:3000/upload');
            // 在文件上传的过程中持续触发
            xhr.upload.onprogress = function(ev) {
                    // ev.loaded 文件已经上传了多少
                    // ev.total  上传文件的总大小
                    var result = (ev.loaded / ev.total) * 100 + '%';
                    // 设置进度条的宽度
                    bar.style.width = result;
                    // 将百分比显示在进度条中
                    bar.innerHTML = result;
                }
                // 发送ajax请求
            xhr.send(formData);
            // 监听服务器端响应给客户端的数据
            xhr.onload = function() {
                // 如果服务器端返回的http状态码为200
                // 说明请求是成功的
                if (xhr.status == 200) {
                    // 将服务器端返回的数据显示在控制台中
                    var result = JSON.parse(xhr.responseText);
                    // 动态创建img标签
                    var img = document.createElement('img');
                    // 给图片标签设置src属性
                    img.src = result.path;
                    // 当图片加载完成以后
                    img.onload = function() {
                        // 将图片显示在页面中
                        box.appendChild(img);
                    }
                }
            }

        }
    </script>

同源

如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源

同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指
A 网站在客户端设置的 Cookie，B网站是不能访问的。

JSONP

jsonp 是 json with padding 的缩写，它不属于 Ajax 请求，但它可以模拟 Ajax 请求

//封装的JSONP方法
function jsonp(options) {
    // 动态创建script标签
    var script = document.createElement('script');
    // 拼接字符串的变量
    var params = '';

    for (var attr in options.data) {
        params += '&' + attr + '=' + options.data[attr];
    }

    // myJsonp0124741
    var fnName = 'myJsonp' + Math.random().toString().replace('.', '');
    // 它已经不是一个全局函数了
    // 我们要想办法将它变成全局函数
    window[fnName] = options.success;
    // 为script标签添加src属性
    script.src = options.url + '?callback=' + fnName + params;
    // 将script标签追加到页面中
    document.body.appendChild(script);
    // 为script标签添加onload事件
    script.onload = function() {
        document.body.removeChild(script);
    }
}

CORS 跨域资源共享

第三方插件cors 可实现跨域请求

const cors = require('cors')
app.use(cors())

CORS：全称为 Cross-originresource sharing，即跨域资源共享，它允许浏览器向跨域服务器发送 Ajax 请求，克服了 Ajax 只能同源使用的限制。

// 拦截所有请求
app.use((req, res, next) => {
    // 1.允许哪些客户端访问我
    // * 代表允许所有的客户端访问我
    // 注意：如果跨域请求中涉及到cookie信息传递，值不可以为*号 比如是具体的域名信息
    res.header('Access-Control-Allow-Origin', 'http://localhost:3000')
        // 2.允许客户端使用哪些请求方法访问我
    res.header('Access-Control-Allow-Methods', 'get,post')
        // 允许客户端发送跨域请求时携带cookie信息
    res.header('Access-Control-Allow-Credentials', true);
    next();
});

withCredentials属性

在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息。

withCredentials：指定在涉及到跨域请求时，是否携带cookie信息，默认值为false

Access-Control-Allow-Credentials：true 允许客户端发送请求时携带cookie

   // 当发送跨域请求时，携带cookie信息
   xhr.withCredentials = true;

第三方模块request

// 向其他服务器端请求数据的模块request
const request = require('request');
app.get('/server', (req, res) => {
    request('http://localhost:3001/cross', (err, response, body) => {
        res.send(body);
    })
});

Jquery中的Ajax

基本使用

  <script src="/js/jquery.min.js"></script>
    <script>
        $('#btn').on('click', function() {
            $.ajax({
                // 请求方式
                type: 'post',
                // 请求地址
                url: '/base',
                // 请求成功以后函数被调用
                success: function(response) {
                    // response为服务器端返回的数据
                    // 方法内部会自动将json字符串转换为json对象
                    console.log(response);
                },
                // 请求失败以后函数被调用
                error: function(xhr) {
                    console.log(xhr)
                }
            })
        });
    </script>

传递请求参数

//在 $.ajax({})中
data: JSON.stringify(params),
      // 指定参数的格式类型
      contentType: 'application/json',

beforeSend方法

//在 $.ajax({})中  
// 在请求发送之前调用
 beforeSend: function() {
    alert('请求不会被发送')
    // 请求不会被发送
    return false;
                }

serialize方法

作用：将表单中的数据自动拼接成字符串类型的参数

var params = $('#form').serialize();
// name=zhangsan&age=30

  // 将表单中用户输入的内容转换为对象类型
        function serializeObject(obj) {
            // 处理结果对象
            var result = {};
            // [{name: 'username', value: '用户输入的内容'}, {name: 'password', value: '123456'}]
            var params = obj.serializeArray();

            // 循环数组 将数组转换为对象类型
            $.each(params, function(index, value) {
                    result[value.name] = value.value;
                })
                // 将处理的结果返回到函数外部
            return result;
        }

发送jsonp请求

$.ajax({
    url: 'http://www.example.com',
    // 指定当前发送jsonp请求
    dataType: 'jsonp',
    // 修改callback参数名称
    jsonp: 'cb',
    // 指定函数名称
    jsonCallback: 'fnName',
    success: function (response) {} 
})

$.get

作用: 用于发送get请求

$.get('http://www.example.com', {name: 'zhangsan', age: 30}, function (response) {})

$.post

作用: 用于发送post请求

$.post('http://www.example.com', {name: 'lisi', age: 22}, function (response) {})

全局事件

   // 当页面中有ajax请求发送时触发
        $(document).on('ajaxStart', function() {
            NProgress.start()
        })

  // 当页面中有ajax请求完成时触发
        $(document).on('ajaxComplete', function() {
            NProgress.done()
        })

RESTful 风格的API

GETPOSTPUTDELETE
获取数据添加数据更新数据删除数据

XML基础

XML是什么？

XML 的全称是 extensible markup language，代表可扩展标记语言，它的作用是传输和存储数据。

XML DOM

XML DOM 即 XML 文档对象模型，是 w3c 组织定义的一套操作 XML 文档对象的API。浏览器会将 XML 文档解析成文档对象模型

 <button id="btn">发送请求</button>
    <div id="container"></div>
    <script type="text/javascript">
        var btn = document.getElementById('btn');
        var container = document.getElementById('container');

        btn.onclick = function() {
            var xhr = new XMLHttpRequest();
            xhr.open('get', '/xml');
            xhr.send();
            xhr.onload = function() {
                // xhr.responseXML 获取服务器端返回的xml数据
                var xmlDocument = xhr.responseXML;
                var title = xmlDocument.getElementsByTagName('title')[0].innerHTML;
                container.innerHTML = title;
            }
        }
    </script>
LonM
关注
专栏目录
前端随笔（七）——Ajax是个啥？
Dfox7_s的博客
04-23 342
对Ajax的小梳理啦
前端Ajax（一）
Obejct的博客
05-25 777
什么是AJAX呢？Asynchronous Javascript &amp; XML——WEB开发过程中的一种技术——异步发送&amp;&amp;请求数据————不需要重新刷新当前页面，能够保留当前的信息。——目前Json数据格式已经占据市场 在图中可以看到，客户端通过js向服务端发送请求是需要一个XmlHttpRequest对象，那么XmlHttpRequest对象是什么呢，他能够用来干什么呢，...
前端技术(六)—— AJAX详解
最新发布
kejizhentan的博客
09-01 2058
ajax详解
前端Ajax
qq_36764457的博客
07-29 370
一、什么是Ajax Ajax(Asynchronous JavaScript And XML)异步JavaScript和XML，是一种创建交互式网页应用的网页开发技术，能够向服务器请求额外的数据而无须卸载页面，对网页的某部分进行更新。Ajax不是一种新的编程语言，而是用于创建更快及交互性更强的web应用程序的技术。 二、XMLHttpRequest（Ajax技术的核心，简称XHR） 这是微软...
前端-AJAX
a592381841的博客
12-18 370
AJAX（asynchronous JavaScript and xml） 服务器给客户端的响应一般是整 Ajax 工作原理： 相当于在用户和服务器·之间加上一个中间层，使得服务器和用户操作响应异步化，只有确认要从服务器得到新数据时！才由ajax引擎代服务器提交请求，响应后返回xml格式。再由ajax解析后交给浏览器。 （旧的交互式，每次返回请求都会返回整个html页面，而ajax只...
十分钟带你了解Ajax
qq_42779387的博客
11-17 182
[autonomic learning] Ajax def(定义):客户端与服务器端异步的通信的技术 原理: 第一步：创建XMLHttpRequest 对象,xmlhttp=new XMLHttpRequest();（它有兼容性问题，在IE中用的是new ActiveXObject） 第二步：向服务器发送请求(GET/POST) xmlhttp.open('POST',url,tr...
关于前端ajax请求的优雅方案（http客户端为axios）
08-28
一、AJAX概述 AJAX（Asynchronous JavaScript and XML），是一种创建交互式网页应用的网页开发技术方案。异步的JavaScript：使用JavaScript语言以及相关浏览器提供的类库的功能向服务端发送请求，当服务端处理完请求...
web前端开发课程概述.pptx
07-07
JavaScript还可以处理页面上的动画效果、滚动行为，甚至与服务器进行异步通信，实现Ajax（Asynchronous JavaScript and XML）功能，提升用户体验。 在就业前景方面，前端开发具有广阔的发展空间。随着互联网行业的...
（免费）菜狗学前端之原生Ajax笔记
04-14
#### 一、原生Ajax概述 原生Ajax是一种使用JavaScript与服务器异步交互的技术，它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分页面内容。实现这一功能的核心是`XMLHttpRequest`对象。 #### 二...
【Web前端开发】第一课、Web前端的概述
01-08
它可以处理用户输入、更新DOM（文档对象模型）、执行异步通信（Ajax）以及创建复杂的网页特效。JavaScript也是实现Web应用的核心技术，如单页应用（SPA）。 四、Web前端技术标准 Web前端的技术标准主要由W3C...
有关Ajax跨域问题的两种解决方法
12-11
Ajax跨域是前端开发中常见的问题，本文描述了以Google浏览器Chrome作为客户端和以Tomcat作为Web服务器的情况下的解决办法。 问题现象 当出现跨域访问的时候ajax通常会报类似如下错误： XMLHttpRequest cannot load ...
web前端 ajax
05-17
web前端
前端ajax
前端学习博客
01-11 1720
文章目录1.基本使用2.Get方式3.post方式4.解决ie缓存问题5.请求超时与网络异常6.取消请求7.重复请求问题 1.基本使用 1、XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。 2、ajax请求状态:xhr.readyState 0：请求未初始化，还没有调用 open()。 ​ 1：请求已经建立，但是还没有发送，还没有调用 send()。 ​ 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。 ​ 3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
前端的Ajax
weixin_44279647的博客
07-27 373
.特点 局部刷新 异步访问 Ajax说明 说明: Ajax是实现前后端交互,最为常用的一种方式. 发展: 1. 原生的JS中包含了Ajax. 但是操作比较复杂. 20行左右 2. jQuery是JS的一种高级函数类库. 3. jQuery提供了一种高效的Ajax的请求的方式. 展望: 现阶段所使用的Ajax是由jQuery进行的动态的封装.,如果将来的前端不使用jQuery则应该采用另外的一种形式发起Ajax请求. Ajax异步调用原理 同步: 用户发起请求时,要求第一时间服务器做出响应.在此期.
前端之 AJAX
fenglepeng的博客
08-06 354
AJAX参数详细列表 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址。 type String (默认: "GET") 请求方式 ("POST" 、 "GET")。注意：其它 HTTP 请求方法，如 PUT 和 DELETE ，但仅部分浏览器支持。 timeout Number 设置请求超时时间（毫秒）。此设置将覆盖全局设置。 async Boolean (默认: true) 默认设置下，所有请求
前端开发中的AJAX
qq_52908359的博客
06-08 418
前端页面中的AJAX的重要知识点
前端_AJAX相关
redglare的博客
11-25 267
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML），包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。 XMLHttpRequest：XMLHTTP是一组API函数集，可被JavaScript、JScript、VBScript以及
前端篇—ajax
wolf的博客
10-16 594
文章目录前言 前言 什么是ajax？ AJAX（Asynchronous JavaScript and XML）：异步的 JavaScript 和 XML，即使用Javascript语言与服务器进行异步交互。 ajax还有一个最大的特点：当服务器响应时，不用刷新整个浏览器页面，而可以局部刷新。 与服务器异步交互 浏览器页面局部刷新 优缺点 优点： 使用js技术向服务器发送异步...
【前端】AJAX（学习笔记）
wmh的博客
12-29 1754
合并多个 Promise 对象并等待所有同时成功的结果，如果有一个报错就会最终为失败状态，当需要同时渲染多个接口数据同时到网页上时使用。Promise 链式调用：依靠 then() 方法会返回一个新生成的 Promise 对象特性，继续串联下一环任务，直到结束。在 async 函数内，使用 await 关键字取代 then 函数，等待获取 Promise 对象成功状态的结果值。宏任务每次在执行同步代码时，产生微任务队列，清空微任务队列任务后，微任务队列空间释放！浏览器和服务器之间通信，动态数据交互。
前端Ajax技术应用实例解析
2. Ajax技术概述： - Ajax代表异步JavaScript和XML，是一种用于创建快速动态网页的技术。 - Ajax的核心是XMLHttpRequest对象，该对象允许浏览器向服务器发送异步请求，并在请求完成后更新网页的部分内容，而无需...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值