@Author：Runsen
@Date：2020/6/1
作者介绍：Runsen目前大三下学期，专业化学工程与工艺，大学沉迷日语，Python， Java和一系列数据分析软件。导致翘课严重，专业排名中下。.在大学60%的时间，都在CSDN，CSDN是我从大一奋斗到现在的地方。
今天，Runsen写的是Ajax。AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
在了解Ajax，需要弄清楚什么是Asynchronous，异步。
异步更新网站
我们在访问一个普通的网站时，当浏览器加载完HTML、CSS、JS以后，网站的内容就固定了。如果想让网站内容发生更改，就必须刷新页面才能够看到更新的内容。
可如果用到异步更新，情况就大为改观了。比如，我们在访问新浪微博时，看到一大半了，点击底部的加载更多，会自动帮我们加载更多的微博，同时页面并没有刷新。
试想一下，如果没有异步刷新的话，每次点击“加载更多”，网页都要刷新，体验就太不好了。
web前端里的异步更新，就要用到 Ajax。
我来说两个简单的例子：
百度下拉图片，就是会发起新地请求，在xhr这里可以看到ajax请求的url。
大家都发过微博吧，假设当前的这条微博处于正在发送的状态时，你还能继续刷微博查看其他内容么？很明显，完全可以，其实这就是一个ajax操作。
学习Ajax，先偷窥菜鸟教程，别人的知识就是香。
其实学Ajax，我会发起请求就够了。
发送 Ajax 请求的五个步骤：
（1）创建异步对象。即 XMLHttpRequest 对象。
（2）使用open方法设置请求的参数。open(method, url, async)。参数解释：请求的方法、请求的url、是否异步。
（3）发送请求。
（4）注册事件。 注册onreadystatechange事件，状态改变时就会调用。
如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
（5）获取返回的数据。
服务器软件
常见的服务器软件有：
-
文件服务器：Server-U、FileZilla、VsFTP等；
-
数据库服务器：Oracle、MySQL、PostgreSQL、MSSQL等；
-
邮件服务器：Postfix、Sendmail等；
-
HTTP 服务器：Apache（免费、开源）、Nginx、IIS（微软的.net服务器）、Tomcat（java编程的服务器）、NodeJS 等。
搭建 HTTP服务
这里你可以下载去 WampServer 的官网下载软件。
但是由于我不需要深入php等，因此我使用Centos搭建 HTTP服务，使用的服务器是Nginx，因此下面需要在Vim上写代码。
下面是安装Nginx服务的过程，我的Centos的ip是192.168.92.90
[root@node01 ~] yum -y install pcre-devel zlib-devel
[root@node01 ~] wget http://nginx.org/download/nginx-1.14.2.tar.gz
[root@node01 ~] tar -xvf nginx-1.14.2.tar.gz
[root@node01 ~] cd nginx-1.14.2/
[root@node01 nginx-1.14.2] ./configure
[root@node01 nginx-1.14.2] make install
[root@node01 nginx-1.14.2] cd /usr/local/nginx/sbin/
[root@node01 sbin]./nginx
[root@node01 sbin]# curl 127.0.0.1:80
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
body {
width: 35em;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>
<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>
<p><em>Thank you for using nginx.</em></p>
</body>
</html>
[root@node01 ~] # 配置nginx开机启动
[root@node01 ~] cd /lib/systemd/system
[root@node01 system] vim nginx.service
##########
[Unit]
Description=nginx
After=network.target
[Service]
Type=forking
ExecStart=/usr/local/nginx/sbin/nginx
ExecReload=/usr/local/nginx/sbin/nginx reload
ExecStop=/usr/local/nginx/sbin/nginx quit
PrivateTmp=true
[Install]
WantedBy=multi-user.target
[root@node01 system] systemctl enable nginx.service
[root@node01 system] systemctl start nginx.service
其实这个index的页面
[root@node01 ~]# cd /usr/local/nginx/
[root@node01 nginx]# ls
client_body_temp fastcgi_temp logs sbin uwsgi_temp
conf html proxy_temp scgi_temp
[root@node01 nginx]# cd html/
[root@node01 html]# ls
50x.html index.html
因此我们需要在html文件夹下东西。
Chrome浏览器的跨域设置
在本地调试程序时，经常需要读取本地文件，但是浏览器默认是不允许的，需要解决跨域问题，下面是常见的解决办法：
Chrome
必须有快捷方式，然后鼠标选中右键->目标，现在里面的内容应该是一个双引号包围的chrome.exe，然后先加一个空格，再加上–disable-web-security --user-data-dir=C:\chrome_data这句话，其中C:\chrome_data 是一个文件夹，随便自己在哪里新建一个都可以，记得这句话是加在双引号打空格之后。
C:\Users\YIUYE\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security --user-data-dir=C:\chrome_data
JS写Ajax请求
[root@node01 html]# vim 1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Ajax 发送 get 请求</h1>
<input type="button" value="发送get_ajax请求" id='btnAjax'>
<script type="text/javascript">
// 绑定点击事件
document.querySelector('#btnAjax').onclick = function () {
// 发送ajax 请求 需要 五步
// （1）创建异步对象
var ajaxObj = new XMLHttpRequest();
// （2）设置请求的参数。包括：请求的方法、请求的url。
ajaxObj.open('get', 'ajax_info.txt');
// （3）发送请求
ajaxObj.send();
//（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
//如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
ajaxObj.onreadystatechange = function () {
// 为了保证 数据 完整返回，我们一般会判断 两个值
if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
// 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
// 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
console.log('数据返回成功');
// 数据是保存在 异步对象的 属性中
console.log(ajaxObj.responseText);
// 修改页面的显示
document.querySelector('h1').innerHTML = ajaxObj.responseText;
}
}
}
</script>
</body>
</html>
[root@node01 html]# vim ajax_info.txt
<p>Runsen学习ajax
</p>
本文先到这里先，下篇主要讲Jq写Ajax请求中的GET和POST。
参考：
- http://www.cnblogs.com/smyhvae/p/8485028.html