ajax请求本地md以及简单封装xhr ajax请求

Posted 2023-04-27

参考技术A 使用ajax请求本地md文件

注意1，如果是POST请求，要设置请求头，因为xhr ajax默认content-type是text/plain，而一般ajax请求或者表单的content-type是application/x-www-form-urlencoded，要注意后端可以解析的content-type格式
关于ajax content-type详细内容看这里 传送门

注意2，XMLHttpRequest在IE8以下不兼容，IE8以下使用ajax的方法是ActiveXObject('Microsoft.XMLHttp')，所以可以做一下兼容：

当然也可以用try-catch

执行结果是：

在javascript中解析markdown需要用到一些js解析库，目前比较流行的是marked.js和showdown.js 二者比较
根据github上的star和bootcdn上的使用情况，选择marked作为解析库

解析结果：(红色部分是引用，也就是md语法">")

结果显而易见，没有样式

所以接下来要布置一下md渲染的样式，这里采用 github-markdown-css ，同时将展示md内容的标签附上样式class="markdown-body"，渲染结果如下：

经过上面三步，已经可以成功请求到本地的markdown文件。回过头来看整个过程，觉得xhr ajax请求应该封装成一个外部函数来调用。

封装ajax函数（不可跨域）

一、主体：封装ajax函数：ajaxFunc

function ajaxFunc(method, url, data, callback, flag) {
//(1)创建ajax对象
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject(‘Microsoft.XMLHttp‘);
}
//(2)请求方式get||post
method = method.toUpperCase();
if(method == ‘GET‘){
xhr.open(method, url, flag);
xhr.send();
}else if(method == ‘POST‘){
xhr.open(method, url, flag);
xhr.setRequestHeader(‘Content-type‘, ‘application/x-www-form-urlencoded‘);
xhr.send(data);
}
//(3)监听请求数据
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
callback(xhr.responseText);
}
xhr = null;
}
}
}
//(4)回调函数对数据处理
function callback(requestData){
var obj = JSON.parse(requestData);
}

 

二、次要

1.ajax全称：asynchronous JavaScript and xml

2.ajax特点：局部获取数据，且不用刷新页面（比如地图）；受同源策略的限制，只能获取同源的资源，除非不同源的服务器某资源的内部进行配置，允许该页面访问。

3.请求方式：get、post、put、delete；

4.get、post的区别：

（1）提交方式：

get：请求的数据在URL之后，用？分隔URL和数据，用&连接多个参数，数据是英文或数字会原样发送，如果是空格转换为+，如

果是中文或其他字符用base64加密，得到16进制的ASCII码值；

post：把提交的数据放在HTTP的包体中

（2）传输数据大小：

首先，HTTP协议没有对传输数据大小进行限制，也没有对URL长度进行限制，但是不同的浏览器和服务器对URL的长度进行了限制（大约都在2K多一点的字节），因此

get的数据请求受到了限制

post虽然不受URL的限制，但是各个服务器会规定对post提交的数据大小进行限制，不过post请求的数据要比get大

（3）安全性：

由于数据提交方式的不同，get请求要更加不安全

（4）post不支持复杂数据类型，因为post没有定义传输数据结构的语义和规则；soap是http post的一个专用版本，遵循一种特殊的xml格式，Content-type设置为

text/xml，任何数据都可以xml化。

5.ajax的请求过程：

6.readystatechange事件——监听资源加载状态

支持该事件（readystatechange）的每一个对象都有一个readyState属性

该属性（readyState）包括5个状态值：

0：未初始化

1：调用了send方法，正在请求资源

2：请求资源完成

3：交互中，解析响应的内容

4：完成

不是所有的对象都会经历readyState属性的每一个状态值的变化，有的对象会直接跳过某些状态

7.服务器响应的状态码：

200：成功请求资源

300：请求的资源位置发生变化

400：服务器拒绝、找不到、不允许 该URL的请求

500：服务器内部问题