前端 ---- ajax（3）

知识----------------------$.ajax    是在jquery.min里的jquery是没有的
1.$.ajax()方法概述
     $.ajax({
         type: 'get',
         url: 'http://www.example.com',
         data: { name: 'zhangsan', age: '20' },
         contentType: 'application/x-www-form-urlencoded',--------默认
         beforeSend: function () { 
             return false
         },
         success: function (response) {},
         error: function (xhr) {}
    });
2.serialize方法
    作用：将表单中的数据自动拼接成字符串类型的参数
    var params = $('#form').serialize();
    // name=zhangsan&age=30
3.$.get()、$.post()方法概述
    作用：$.get方法用于发送get请求，$.post方法用于发送post请求。
    $.get('http://www.example.com', {name: 'zhangsan', age: 30}, function (response) {}) 
    $.post('http://www.example.com', {name: 'lisi', age: 22}, function (response) {})
4.jQuery中Ajax全局事件
    只要页面中有Ajax请求被发送，对应的全局事件就会被触发
        .ajaxStart()     // 当请求开始发送时触发
        .ajaxComplete()  // 当请求完成时触发
    -----NProgress
    引入：
        <link rel='stylesheet' href='nprogress.css'/>
        <script src='nprogress.js'></script>
    使用：
        NProgress.start();  // 进度条开始运动 
        NProgress.done();   // 进度条结束运动
    ...........等等等
5.RESTful API 概述
    GET：      获取数据
    POST：    添加数据
    PUT：      更新数据
    DELETE： 删除数据

    ----RESTful API 的实现
        GET：http://www.example.com/users  获取用户列表数据
        POST：http://www.example.com/users创建(添加)用户数据
        GET：http://www.example.com/users/1获取用户ID为1的用户信息
        PUT：http://www.example.com/users/1修改用户ID为1的用户信息
        DELETE：http://www.example.com/users/1删除用户ID为1的用户信息
6.XML
    XML 的全称是 extensible markup language，代表可扩展标记语言，它的作用是传输和存储数据。
     <students> 
         <student>
             <sid>001</sid>
             <name>张三</name>
             </student>
         <student>
             <sid>002</sid>
             <name>王二丫</name>
             </student>
     </students>

    --XML DOM
        XML DOM 即 XML 文档对象模型，是 w3c 组织定义的一套操作 XML 文档对象的API。浏览器会将 XML 文档解析成文档对象模型。


        如果是XML数据，就不能使用xhr.response来获取数据，要使用xhr.responseXML来获取，这样可以发送一个document文档过来而不是一整串字符串
        XML DOM可以进行与DOM差不多的操作
        var xmlDocument = xhr.responseXML;
        var title = xmlDocument.getElementsByTagName('title')[0].innerHTML;
3.jsonp



经验
	1.
		var fnName ='myJsonp' +Math.random().toString().replace('.','')  函数名不能是纯数字
		window.fn=options.success

		但是如果想要给函数名随机取名就需要替换fn，但是window.后面不能是变量而应该是值，如 window.fnName 是不行的

		所以需要 window[fnName]=options.success
		
	2.
	res.jsonp其实就是进行以下操作，没有定时函数，直接res.send
		const fnName = req.query.callback
		const data={name: "张三"}
		const result = fnName+'('+JSON.stringify(data)+')'
		setTimeout(()=>{
			res.send(result)
		},1000)
	 
	 3.
	 res.header('Access-Control-Allow-Methods','get')  只能通过app.get或app.post 设置拦截不然好像没用
	 
	 4.$.ajax()中，如果服务端需要一个JSON对象就应该contentType:'application/json',且
	 data:JSON.stringify(params),  因为如果不加JSON的话，data会自动把数据转换成JSON字符串然后发送出去
	 
	 5.beforeSend  Send是的S大写