Ajax基础&项目

Ajax

• 同步Synchronous
  在一个任务进行的过程中，不能开启其他的任务
  同步访问：浏览器在向服务器发送请求时，浏览器只能等待服务器响应，不能做其他事
  例如：form表单，浏览器地址栏输入url访问，a标签跳转
• 异步Asynchronous
  在一个任务开启时，可以执行其他任务
  异步访问：浏览器在服务器发送请求时，用户可以进行在页面上进行其他操作
  例如：用户重复验证，股票软件，百度搜索
• 什么是Ajax
  Asynchronous JavaScript and XML
  异步的js xml载体 xml现在不常用 常用json
• ajax步骤
  使用js提供的异步对象，异步地向服务器发送请求，并接受响应回来的数据
  js提供的异步对象：XMLHttpRequest
  (1)创建异步对象var xhr = XMLHttpRequest();
  (2)创建请求xhr.open("method","url","isAsy");//isAsy：是否使用异步的方式发送请求 true
  (3)发送请求xhr.send(formdata);
  (4)接受响应xhr.onreadystatechange = function(){};

xhr.readyState表示xhr的5个状态：
0 请求尚未初始化
1 打开连接，请求正在发送
2 接收到响应头信息
3 正在响应主体
4 响应主体接收完毕
xhr.readyState的值每改变一次，function就会运行一次，所以function执行4次

注意：：ajax访问原生http的get并传递参数

• http的get请求
• http的带参的get请求
• result的get请求
  restful的get如果不带参数，写法和http的不带参数get一模一样

router.get("/restful_login/:uname&:upwd",(req,res)=>{
// 所有添加:的参数，不能使用query去获取，使用params
var $uname=req.params.uname;
var $upwd=req.params.upwd;
res.send($uname+"~~~~"+$upwd)
});

注意：

1.定义接口的时候，参数名称需要添加：,但是调用接口传输参数的时候，没有冒号
2.多个参数的连接，可以使用&和-，但是需要前后端对应
3.restful的非空验证，不能写在后端。只能放在前台验证！！

• result的delete请求
  restful的delete与restful的get，一模一样，只是把get改成delete

restful请求方法： get delete post put查 删 增 改

• result的post和put
  有请求主体，http的post/put 与result的post/put一模一样

• JSON的解析
  服务器得到obj类型，当做响应数据传给浏览器，在传递过程中自动转换成string类型
  前台得到这个string类型的数据叫做json字符串，需要吧json字符串解析成obj类型才能使用这个数据

  json (javascript object notation)：以js对象的格式表现出来的字符串
  json的特点：
  (1)在数据的传递过程中，自动生成json串
  (2)json中对象的属性必须到双引号
  (3)值是字符串类型，也必须带双引号
  (4)把json字符串解析成js对象 JSON.parse(json串)

• XML数据分析(eXtensible Markup Language)
  xml是html的一个变种，可扩展的标记语言
  xml专门用来承载数据，是以标签的方式来放数据
  xml和html有很大区别：

1.xml文件的后缀是.xml
2.html中的标签和属性，都是预定义好的可以直接使用，xml中的标签和属性，是自己定义的
3.xml的标签名称，严格区分大小写 和是两组标签
4.xml中只有双标签，没有单标签

编写xml：

1.创建后缀以.xml结尾的文件
2.第一个行做声明<?xml version="1.0" encoding="utf-8"?>
3.有且只有一个根标签
4.使用var r=xhr.responseXML获取document对象
5.使用dom操作 r.getElementsByTagName(“uname”)
6.获取标签是的所有对象放入一个数组
7.再进行数组操作

Ajax项目

1、登录模块 get /pro/v1/login/:uname&:uwpd 响应 1为登录成功 0为登录失败
2、查询所有用户信息 get /pro/v1/list 响应json
3、根据uid删除用户 delete /pro/v1/del/:uid 响应 1为删除成功，0为删除失败
4、根据uid查询用户信息 get /pro/v1/search/:uid 响应json
5、根据uid修改用户信息 put /pro/v1/update 响应 1为成功，0为修改失败
6、根据uname 查询用户信息 get /pro/v1/select/:uname 响应1为查询成功，0为没有此用户
7、注册 post /pro/v1/reg 响应1位注册成功，0为注册失败