复习Ajax
Posted 老张在线敲代码
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了复习Ajax相关的知识，希望对你有一定的参考价值。
ajax简介
ajax全称为Asynchronous javascript And XML 就是
异步的js和XML，ajax不是一个新的编程语言，而是一种将现有的技术组合在一起使用的新方式
ajax特点
通过ajax可以在浏览器中向服务器发起异步请求，允许用户通过一些事件来实现局部页面更新，最大特点就是可以通过
无刷新获取新的数据
ajax缺点
没有
历史记录，不能回退，存在跨域问题（同源策略）；对seo优化不好
XML简介
xml是一个
可扩展语言，被设计用来传输和存储数据，xml和html类似，不同的是html中都是预定义标签，而xml中没有预定义标签，全都是自定义标签用来表示一些数据
html语法
name = '小明';age=18;
xml语法
<student>
<name>小明</name>
<age>18</age>
</student>
HTTP协议
http协议又被称为
超文本传输协议，协议详细规定了浏览器与万维网服务器之间互相通信的规则
请求报文
请求行 GET / URL / http版本
请求头 Content-type application/x-www-form-urlencoded
...
空行
请求体 get请求则为空 post请求 username=admin&password=admin
响应报文
响应行 http版本 200 ok
响应头 Content-Type text/html;charset=utf-8
Content-length:2048
...
空行
响应体 <html>
<head></head>
<body>
<h1>返回的内容</h1>
</body>
</html>
伪造ajax
部分站点设置了权限
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪造ajax</title>
</head>
<style type="text/css">
</style>
<body>
<div>
<p>请输入要加载的地址
<span id="currentTime"></span>
</p>
<p>
<input type="text" id="url" value="https://baidu.com/" />
<input type="button" value="提交" onclick="loadPage()"/>
</p>
</div>
<div>
<h3>加载页面的位置：</h3>
<iframe width="100%" height="800px" id="iframePosition"></iframe>
</div>
</body>
<script type="text/javascript">
window.onload=function()
var myTime = new Date();
document.getElementById('currentTime').innerHTML = myTime.getTime();
function loadPage()
var targetUrl = document.getElementById('url').value;
document.getElementById('iframePosition').src=targetUrl
</script>
</html>
安装nodejs
安装express
编写时候要注意域名被占用等常见问题
npm i express
代码简介流程：
get请求
创建express.js文件
//引入express
const express = require('express');
//创建应用对象
const app =express();
//创建路由规则
app.get('/server',(request,response)=>
//request是请求报文的封装
//response是响应报文的封装
//设置响应头 允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//设置响应
response.send('hello')
//监听端口启动服务
app.listen(8000,()=>
console.log('服务已经启动，8000端口监听中...')
)
html文件中
结构省略
js代码
const btn = document.getElementById('btn');
btn.onclick = function()
//创建对象
const xhr = new XMLHttpRequest();
//初始化请求方法和url
xhr.open('GET','http://127.0.0.1:8000/server');
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
//发送
xhr.send();
//事件绑定，处理服务器所返回的结果
xhr.onreadystatechange = funcion()
//判断
if(xhr.readyState === 4)
//大于2xx开头的都是属于成功
//判断响应状态码 200 404 400 401 500...
if(xhr.status >= 200 && xhr.status<300)
//处理结果 行 头 体
//响应行
console.log(xhr.status)//返回状态码
console.log(xhr.statusText)//返回状态字符串
console.log(xhr.getAllRedponseHeaders());//所有响应头
console.log(xhr.response)//响应体
post请求
创建express.js文件
//引入express
const express = require('express');
//创建应用对象
const app =express();
//创建路由规则
app.post('/server',(request,response)=>
//request是请求报文的封装
//response是响应报文的封装
//设置响应头 允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//设置响应
response.send('post')
//监听端口启动服务
app.listen(8000,()=>
console.log('服务已经启动，8000端口监听中...')
)
html文件中
结构省略
js代码
const result= document.getElementById('result');
result.addEventListener('mouseover',function)
//创建对象
const xhr = new XMLHttpRequest();
//初始化请求方法和url
xhr.open('POST','http://127.0.0.1:8000/server');
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//发送 附带参数
xhr.send('a=100&b=200');
//事件绑定，处理服务器所返回的结果
xhr.onreadystatechange = funcion()
//判断
if(xhr.readyState === 4)
//大于2xx开头的都是属于成功
//判断响应状态码 200 404 400 401 500...
if(xhr.status >= 200 && xhr.status<300)
//处理结果 行 头 体
//响应行
result.innerHTML = xhr.response
以上是关于复习Ajax的主要内容，如果未能解决你的问题，请参考以下文章