zoukankan      html  css  js  c++  java
  • 学习AJAX必知必会(1)~Ajax介绍、xml介绍、express框架


    一、ajax(Asynchronous JavaScript And XML,即异步的 JS 和 XML)

    ■ 异步请求和同步请求(是不是想到了java的同步线程、异步线程了哈哈哈)?

    □ 共性:'同步'两个字-----都是针对资源而说的,同时来到资源的大门,门口的大小是固定的哈哈,所以 需要排队等资源

    • 在java的世界里,线程同步是通过synchronized 关键字进行线程加锁,同步来到某些全局变量的资源的大门的线程进行排队。
    • 在web的世界里,同步请求是同时需要获取到服务器的资源, 即发送一个请求之后,需要等待服务器响应返回结果,才能够发送下一个请求.

    □ 异步的优势不言而显。


    1、通过 AJAX 可以在浏览器中向服务器发送异步请求实现无刷新获取数据

    2、优势:无刷新获取数据

    ① 无需刷新页面而与服务器端进行通信(即无刷新获取数据
    ② 可以根据用户事件来更新部分页面内容

    ■ 缺点:

    ① 没有浏览历史,不能回退
    ② 存在跨域问题
    ③ SEO 不友好,不利于爬取数据

    3、注意:AJAX 不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。



    二、xml(可扩展标记语言)[是Ajax最初的数据格式,现在使用Json格式啦]

    1、作用是:传输和存储数据

    2、与html区别:html是预先定义好的语言,比如p标签是段落标签,a标签是链接标签,而xml是自定义标签

    3、xml传输和存储数据的例子:

    <!-- 存储和传输一个学生信息 -->
    <student>
    	<name>小明</name>
    	<age>16</age>
    	<sex>男</sex>
    </student>
    

    ■ 使用json表示一个学生的信息,即键值对的集合(对象)

    {name: '小明', age:16, sex:'男'}
    


    □ 因为ajax作用就是向服务端发送请求,所以咱这里咱使用express(一个简洁而灵活的 node.js Web轻量级的应用框架)提供服务。


    三、express(基于Node.js 平台的 web 应用开发框架)

    1、准备工作:使用前安装node.js 应用程序(安装node的文章:https://blog.csdn.net/weixin_45630258/article/details/122129367)

    2、简单使用express:

    //(1)先进入某个文件夹项目下,编译器终端安装npm依赖命令:
    npm init --yes
    //(2)编译器终端安装express依赖命令:
    npm i express
    //(3) 启动express服务端框架命令(让咱书写的express的基本使用.js 文件提供服务)
    //在浏览器地址栏搜索:http://127.0.0.1:8000/server
    node server.js
    

    ■ server.js 文件

    //1、引入express
    const express = require('express');
    
    //2、创建应用对象
    const app = express();
    
    //3、创建路由规则
    //request 是请求报文的封装,response 是响应报文的封装
    //请求方式为get
    app.get('/server', (request, response) => {
        //设置响应头(允许跨域)
        response.setHeader('Access-Control-Allow-Origin', '*');
        //设置响应头(允许自定义请求头)
        response.setHeader('Access-Control-Allow-Headers', '*');
        //设置响应体
        response.send('hello express get');
    });
    //请求方式为post
    app.post('/server', (request, response) => {
        //设置响应头(允许跨域)
        response.setHeader('Access-Control-Allow-Origin', '*');
        //设置响应头(允许自动自定义请求头)
        response.setHeader('Access-Control-Allow-Headers', '*');
        //设置响应体
        response.send('hello express post');
    });
    //请求方式设置为all,可以接收http任意类型的请求
    app.all('/server', (request, response) => {
        //设置响应头(允许跨域)
        response.setHeader('Access-Control-Allow-Origin', '*');
        //设置响应头(允许自动自定义请求头)
        response.setHeader('Access-Control-Allow-Headers', '*');
    
         //响应一个json数据(因为send方法的参数类型是字符串,所以需要先对json数据进行转化)
        const data = {
            name: '小明',
            age: 18,
            sex: '男'
        };
        //data 数据类型转化(通过JSON.stringify()方法进行转化)
        let str = JSON.stringify(data);
    
        //设置响应体
        response.send(str);
    });
    
    //4、监听端口启动服务
    app.listen(8000, () => {
        console.log('服务端已经启动,8000端口正在监听...')
    })
    
    //4、监听端口启动服务
    app.listen(8000, () => {
        console.log('服务端已经启动,8000端口正在监听...')
    })
    
  • 相关阅读:
    单独编译和使用webrtc音频回声消除模块(附完整源码+测试音频文件)(转)
    Android手机直播(三)声音采集
    Android 音视频去回声、降噪(Android音频采集及回音消除)(转)
    Android中Selector的setSelected“方法不管用”
    Github的快捷键
    哔哩哔哩视频显示在Github的Markdown博客页方法
    小巧的屏幕录像软件oCam
    win7各种插件的下载与使用
    3D 打印机选择说明文档
    在Ubuntu 18.04中安装Pycharm及创建Pycharm快捷方式
  • 原文地址:https://www.cnblogs.com/shan333/p/15831151.html
Copyright © 2011-2022 走看看