Ajax学习笔记

Ajax异步交互

概念：异步的JavaScript 和XML（实质：Ajax是一个可以和后台沟通的技术）

工作原理：在用户与服务器之间加了一个中间层（Ajax引擎）使用户操作与服务器响应异步化。

包含技术：

     CSS 、HTML来表示

     DOM模型用来交互和动态显示

     XMLHttpRequest来和服务器进行异步交互

     JavaScript进行绑定和调用

Ajax的使用

  封装一个ajax函数

 1.创建特定异步对象 xhr

 var xhr = new XMLHttpRequest()

 2.设置请求信息

 xhr.open(method,url,async)

 方法（method):get  post put delete

 路径 (url):

异步(async):true  false

 3.发送请求   

 get方式      xhr.send()  或者 xhr.send(null)

post方式   post提交数据必须包含Content-Type和消息主体编码方式

即就是请求头信息 xhr.setRequestHeader("Content-Type","编码格式")。

常用的格式为application/x-www-form-urlencoded

 4.监听和等待接收数据（往往把监听放到设置请求信息之前）

xhr.onreadystatechange = function(){xhr

if(xhr.readyState == 4){

if(xhr.status>=200&&xhr.status<300){

var result = xhr.responseText()

console.log(result)

}

}

}

前后台交互

1.搭建后台 

   1）创建项目目录project

   2）创建项目目录中的静态资源文件夹public

   3)   安装项目所需要的包

        例如：安装npm install express 时项目目录会创建 node modules目录，并且会下载所有依赖的包。

   4） 创建app.js为项目入口文件，用于创建应用程序对象

       ①引入express框架

       const express = require("express");

       ②创建WEB服务器

      const app  = express();

      ③设置监听端口

       app.listen(8080);

      ④静态资源托管

       app.use(express.static("./public")）

      ⑤在终端启动服务器

      ⑥给前台一个接口地址，用get请求方式

       app.get('接口地址',(req,res)=>{

       res.send('响应')

     }）

简单的DOM操作

      DOM：文档对象模型

     用js去动态操作网页中的内容。

     1）获取元素信息

        単标签用.value获取内容，双标签用innerHTML获取内容

       利用id获取信息 

           var text = document.getElementById('text')

           var btn =  document.getElementById('btn')

     2) 触发事件

        trim() 清空输入内容的前后空格

        获取用户数据

         btn.onclick = function(){

         var  mytext = text.value.trim()

      }

    3）调用ajax函数，并把数据传入ajax()

    4)  数据回来把数据展示在页面中（可以单独用一个函数来展示）