AJAX单词大全

Posted 2021-06-18 紫色烟云

AJAX单词大全

AJAX单词大全
  0~9
     HTTP:超文本传输协议（Hypertext Transfer Protocol，HTTP）是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII形式给出；而消息内容则具有一个类似MIME的格式。这个简单模型是早期Web成功的有功之臣，因为它使开发和部署非常地直截了当。; //
     AJAX:广泛用于网页的网络请求及局部刷新dom,(Asynchronous javascript And XML),译为:异步的JavaScript与XML; //
     XHL:可扩展标记语言，被设计用来传输和存储数据,自动生成为由语义化标签组成的dom; //
     Node.js:Node.js是一个基于Chrome V8引擎的JavaScript运行时，它其实是一个程序，它可以解析JS代码并调用计算机资源; //
     Express:基于Node.js平台，快速，开放，极简的Web开发框架; //
     nodemon:允许动态刷新服务源文件,不需要重启服务来更新服务源文件，终端："nodemon XXX.js" 动态更新服务支持; //
     服务文件的创建(准备：1,安装node.js;2,安装node中的express工具包(node init)(npm install express -g)) //
     Express:表示;表达;表露;
     require :需求, 需, 要有, 命令, 责;
     get:得到，获取;
  10~19
     post : 邮政;邮递;邮寄;
     request : 要求，请求;要求的事;
     response:回答，答复;反应;响应;
     send: 发送;传达;转致;告知;派遣;
     btn :(button)按钮
     btns :(buttons)按钮(复数)
     listen :听;倾听;听信;听从;(让对方注意)听着，注意听;
     set : 放;置;使处于;使处于某种状况;使开始;
     result:结果;结果(包括比分、得票、获胜者或当选者名单等);
     onclick:当点击，按钮点击事件
  20~29
     xhr : (XMLHttpRequest)请求体
     open : 打开;
     server :服务器;发球者;上菜用具(往各人盘子里盛食物的叉、铲、勺等)
     on:当...时候，在...上
     ready:准备完毕;已完成;
     state: 状态;状况;情况;国家;州;邦;
     change: 改变，变化;
     onreadystatechange : 当请求完成状态码变化时的事件
     readyState : 请求完成过程状态码，表示状态 0 =>1 =>2 =>3 =>4，0:准备，1:发送中，2:等待响应中，3:部分接收，4:完全接收
     xhr.status: 请求状态码(2XX,404之类的)
  30~39
     status: 状态;地位;身份;职位;高级职位;社会上层地位;
     response :响应;(礼拜仪式中的)答唱咏，启应经
     set:设置，放置;
     header:响应头;
     access: 访问，存取(计算机文件);到达;进入;使用;
     Access-Control-Allow-Origin: 访问控制允许原点;
     Access-Control-Allow-Headers:访问控制允许标头;
     Access-Control-Allow-Method:访问控制允许方法;
     data: 数据;
     JSON :对象符号;数据格式;实例;轻量级的数据交换格式;表示法
  40~49
     stringify :弦化(字符串化)
     parse:解析;
     install:安装;
     open:打开;
     timeout : 超时，超时设定;
     ontimeout : 当超时时事件;
     onerror :当发生错误时事件
     alert : 警报;警告;
     abort: 中止(尤指很可能失败的事情),流产;
     ajax : 创建交互式网页应用的网页开发技术;阿贾克斯;跨域;异步交互;阿雅克斯
  50~59
     url : 网址;地址;统一资源定位器;公司网址;属性;
     data :数据;
     type:类型;
     dataType :数据类型;
     json : 数据;对象;文件;解析;处理
     success: 成功;
     timeout :超时，超时设定;
     error : 错误;
     headers:头信息;
     click : 点击;
  60~69
     axios : 轴心(通信)
     params : 参数(复数);
     level:水平;质量;品级;层次;级别;
     username: 用户名;
     admin: 管理;经营;
     password:密码;
     then:然后
     promise:许诺;承诺;答应;保证;使很可能;预示
     fetch:取来,(去)拿来;(去)请来;售得，卖得(某价)
     :
  70~79
     const express = require("express"); //1,引入express框架
     const app = express(); //2,创建应用对象
     app.get('/', (request, response) => { //3,创建路由规则; request 是对请求报文的封装; response 是对响应报文的封装;
     response.send('HELLO EXPRESS');//设置响应回去的内容
     }); //
     app.listen(8000, () => { console.log('服务已经启动, 8000 端口监听中......'); }); //4,监听商品服务器
     /* 启动服务：终端中输入" node 01_express基本使用格式.js ;" 访问服务：浏览器中输入"127.0.0.1:8000" ; 关闭服务：终端中ctrl+C关闭并释放资源（服务运行在node栏下）; */
     //
     脚本文件请求部分的内容
     const btn = document.getElementById('set'); //获取button元素
  80~89
     const result = document.getElementById('result');//获取显示响应内容的元素
     btn.onclick = function () {} //绑定事件
     const xhr = new XMLHttpRequest();//1,创建请求体对象
     xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');//2,初始化 设置请求方法为GET型和url，分割符?后面为参数，多个参数用&分开
     xhr.send();//发送请求
     xhr.onreadystatechange = function () {} //请求体状态码改变时触发事件，4,事件绑定，处理服务端返回的结果，readystate 是xhr对象中的属性，表示状态 0 =>1 =>2 =>3 =>4，0:准备，1:发送中，2:等待响应中，3:部分接收，4:完全接收
     if (xhr.readyState === 4) {} //判断(服务端返回了所有的结果)
     if (xhr.status >= 200 && xhr.status < 300){} //判断响应状态码,2XX均为响应成功,404之类的为响应失败
     console.log(xhr.status);//状态码
     console.log(xhr.statusText);//状态字符串
  90~99
     console.log(xhr.getAllResponseHeaders());//所有响应头
     console.log(xhr.response);//所有响应体//
     result.innerhtml = xhr.response; //设置result的文本
     POST型网络请求与上面的GET型的不同点
     xhr.open('POST', 'http://127.0.0.1:8000/01_server'); //初始化 设置请求方法为GET型和url，参数一般放在请求体中
     xhr.send('a=100&b=200&c=300'); //发送请求并添加参数，多个参数之间用&分开,其实只是给服务端发送了一个字符串，在服务端要有对应的代码处理参数字符串//
     xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //设置请求头(预定义)
     xhr.setRequestHeader('name','username_XXX'); //设置自定义请求头
     response.setHeader('Access-Control-Allow-Origin','*'); //设置响应头，设置允许跨域访问此服务
     response.setHeader('Access-Control-Allow-Headers','*'); //设置响应头，设置允许跨域访问此服务
  100~109
     response.setHeader('Access-Control-Allow-Method','*'); //设置响应头，设置允许跨域访问此服务
     const data={ name:'username_XXX' }; //收集数据
     let str =JSON.stringify(data);//必须对对象进行字符串转换才可响应回去
     response.send(str); //发送响应数据
     xhr.responseType='json';//设置响应体数据的类型，xhr.response自动转换为json型对象
     let data =JSON.parse(xhr.response);//xhr.response手动转换为json对象
     'npm install nodemon -g'安装nodemon工具后'nodemon .|01_JSON-server.js'启动服务且允许动态刷新服务源文件 //
     xhr.open('GET','http://127.0.0.1:8000/server?t='+Date.now());/* IE缓存请求结果造成的时效性问题,解决办法：每次将最新日期作为一个参数，浏览器将认为这是一个新的请求 ,从而解决相同的请求直接使用缓存结果造成的时效性差的问题 *///
     xhr.timeout=2000; //设置超时时间为 2s 及超时回调函数
     xhr.ontimeout=function(){ alert('网络异常，请稍后重试!!'); };//超时回调函数
  110~119
     xhr.onerror=function(){ alert('你的网络似乎出现了一些问题，请检查您的网络连接！'); }; //网络异常回调
     xhr.abort();//xhr.abort()方法立即取消请求
     自动取消重复请求:如果正在发送，则取消该请求，创建一个新请求
     let isSending =false;//是否正发送重复的AJAX请求
     if(isSending){xhr.abort();} //如果正在发送，则取消该请求，创建一个新请求
     isSending=true; //修改标识变量的值
     在jQuery发送AJAX请求
     1，JQ发送AJAX中 通用型请求
     $('button').eq(2).click(function () {
     $.ajax({
  120~129
     // 服务地址
     url: 'http://127.0.0.1:8000/jquery-server',
     // 请求上传的参数
     data: {
     a: 100, b: 200, c: 300
     },
     // 请求类型,GET或POST
     type: 'GET',
     // 响应体结果转换类型
     dataType: 'json',
  130~139
     // 响应成功后的回调函数
     success: function (data) {
     console.log(data);
     $('#result').text(data.name);
     // 超时时间
     timeout: 2000,
     // 响应失败的回调
     error: function () {
     console.log('出错了！！');
     // 头信息
  140~149
     headers:{
     name:'啊啊啊',
     sex:'男'
     }
     });
     });
     /* 2,JQ发送AJAX中 GET型请求 */
     $.get('http://127.0.0.1:8000/jquery-server', { a: 100, b: 200, c: 300 }, function (data) {
     $('#result').text(data.name);
     $('button').eq(1).click(function () {
  150~159
     console.log(data);
     }, 'json');
     /* 3,JQ发送AJAX中 POST型请求 */
     $.post('http://127.0.0.1:8000/jquery-server', { a: 100, b: 200, c: 300 }, function (data) {
     app.all('/jquery-server', (request, response) => {//允许所有类型的访问，POST型或GET型都行
     // 设置响应头，设置允许跨域
     response.setHeader('Access-Control-Allow-Origin','*');
     response.setHeader('Access-Control-Allow-Headers','*');
     response.setHeader('Access-Control-Allow-Method','*');
     // 设置响应体
  160~169
     let data={
     name:'uername_XXX'
     }
     response.send(JSON.stringify(data));
     }); //
     用axios工具包发送AJAX请求 (Vue和React官方推荐的请求方式)
     script src <!-- 引入axios -->
     1，axios通用请求方式
     btns[2].onclick = function () {
     // 通用请求
  170~179
     axios({
     // url
     url: 'axios-server',
     // 请求方式
     mothod:'post',
     // url参数
     params: {
     vip: 10,
     level: 30
     headers: {
  180~189
     a: 100,
     b: 200,
     c: 300
     // 请求体参数
     data:{
     username:'admin',
     password:'admin'
     }).then(response=>{
     console.log(response);
     // 响应状态码
  190~199
     console.log(response.status);
     // 响应状态字符串
     console.log(response.statusText);
     // 响应头信息
     console.log(response.headers);
     // 响应体
     console.log(response.data);
    
     };
     $('button').eq(0).click(function () {
  200~209
     btns[0].onclick = function () {
     // 2,axios发送GET请求
     axios.get('/axios-server', {
     // url参数
     params: {
     a: 100,
     b: 200,
     c: 300
     },
     // 请求头信息
  210~219
     headers: {
     name: 'uername_XXX',
     age: 20
     }
     }).then(value => {
     console.log(value);
     });
     };
     // 3,axios发送POST请求
     btns[1].onclick = function () {
  220~229
     // POST请求
     axios.post('/axios-server', {
     // 请求体
     username: 'admin',
     password: 'admin',
     }, {
     a: 200,
     b: 400,
     c: 600
     name: 'uername_XXXX',
  230~239
     /* 结果处理是promise方式 */
     fetch()函数发送AJAX请求
     /* fetch()函数是一个全局函数，用途为获取系统资源的，返回值为一个Promise对象 */
     btn.onclick = function () {
     fetch('http://127.0.0.1:8000/fetch-server?VIP=10', {
     // 请求方法
     method: 'POST',
     // 请求头
     headers: {
     name: '123'
  240~249
     },
     // 请求体
     body: 'username=admin&password=123123123'
     }).then(response => {
     return response.text();//结果转为为字符串
     // return response.json();//结果转为json型(类似对象)
     }).then(response=>{
     console.log(respone);
     });
     }
  250~259
     //
     @沉木 2021/3/22

@沉木