AJAX基础部分学习笔记

AJAX
Asynchronous JavaScript And Xml:异步的JS和XML
1.优势：
无需刷新获取数据
可根据用户事件更新部分页面内容
缺点：
无浏览历史，不能回退
存在跨越问题（同源）
SEO（搜索引擎优化）不友好
2.发送ajax的四种方式：原生，jQuery,fetch,axios
3.不是新的编程语言，而是将现有的组合在一起
4.HTTP(hypertext transport protocol)协议：超文本传输协议
规定了浏览器和万维网服务器之间互相通信的规则
请求报文：重点是格式与参数
行：GET(或者POST) /?ie=utf-8 HTTP/1.1
头：Host::atguigu.com
Cookie:name=guigu
Content-type:application/x-www-form-urlencoded
User-Agent:chrome 83
空行:必须有
体：GET请求，请求体为空
POST请求，请求体可不为空
如：username=admin&password=admin
响应报文: 行：HTTP/1.1 200 OK
头：Content-Type:text/html;charset=utf-8
Content-length:2048
Content-encoding:gaip
空行必须有
体：

okkk

</.body>

5.vscode启动终端：ctrl+~
6.第八节终端问题
文件命名全英文
Js文件直接放在项目里，不能再项目得文件里
Ctrl+c释放端口
7.
// 1.引入express
const express = require(‘express’);

// 2.创建应用对象
const app = express();

// 3.创建路由规则：request请求报文的封装,response响应报文的封装
app.get(’/’,(request,response)=>{
// 设置响应
response.send(‘okk’);
});

// 4.监听端口启动服务
app.listen(8000,()=>{
console.log(“服务已经启动，8000 端口监听中…”);
})

8. app.get(’/server’,(request,response)=>{
   // 当路径是/server时,执行此后面括号里的回调函数,并且由response作出响应
   }

9. // 1.创建对象
   const xhr = new XMLHttpRequest();
   // 2.初始化 设置请求方法和url
   xhr.open(‘GET’,‘http://127.0.0.1:8000/server’);
   // 3.发送
   xhr.send();
   /*
   4. 事件绑定 处理服务端返回的结果
   on when 当…时候
   readystate 是 xhr 对象中的属性,表示状态 0 1 2 3 4
   0 ：未初始化
   1：open方法调用完毕
   2：send方法调用完毕
   3：服务端返回部分结果
   4：服务的返回所有结果
   change 改变
   */

   // 设置result的文本
                result.innerHTML = xhr.response;
   

10.服务端??

响应体没反应

12.安装nodemon以后：使用nodemon server.js启动终端
避免反复启动
13.
$(‘button’).eq(2).click(function(){
$.ajax({
// 参数是对象
// url
url:‘http://127.0.0.1:8000/jQuery-server’,
// 参数
data:{a:100,b:200},
// 请求类型
type:‘GET’,

			// 响应体结果设置
			dataType:'json',
			// 成功回调
			success:function(data){
				console.log(data);
			},
			// 超时
			timeout:2000,
			// 失败的回调
			error:function(){
				console.log('error!!');
			},
			// 头信息
			headeres:{
				c:300,
				d:400
			}
		})
	})

14.同源
协议，域名，端口号 完全相同
15. 跨域解决方案
（1）JSONP：JSON with Padding
非官方跨域解决方案，只支持get请求。
利用script标签实现跨域。
（2）COPS:Cross-Origin Resource-Shareing
官方跨域解决方案
完全再服务器中处理