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端口正在监听...')
    })
    
  • 相关阅读:
    (引)spring学习笔记1.什么是控制反转
    Arduino 各种模块篇 步进电机 step motor 舵机 servo 直流电机 总复习
    Raspberry Pi Wireless Adaptor
    Pyramid 使用总结1
    Arduino 各种模块篇 人体红外感应模块 proximity sensor
    Pyramid 使用总结2
    Webcam Streaming Desktop Recording on Linux for ubuntu or its destros
    Arduino 各种模块篇 步进电机 step motor( 不用库,不用shield, 纯)
    Arduino 各种模块篇 motor shield 电机扩展板(舵机、直流电机、步进电机party)
    转载 stepper motors
  • 原文地址:https://www.cnblogs.com/shan333/p/15831151.html
Copyright © 2011-2022 走看看