Ajax与PHP的小插曲

╰+哭是因爲堅強的太久メ 2023-02-18 06:59 3阅读 0赞

**首先来说说各自的意思**

## Ajax ##

> Ajax就是异步的js和XML

Ajax即"Asynchronous Javascript And XML" (异步JavaScript 和XML), 是指一种创建交互式、快速动态网页应用的

作用：
     - 网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
     - 通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
     - 使用ajax技术对网页进行局部更新 (向后台发送 了请求但是页面不会发生跳转)

**发送ajax请求的5个步骤**

1.  创建请求对象
2.  调用open方法(open 方法里面来设置请求方式和请求路径)
3.  设置请求头(get请求不需要，可以直接忽略 post请求必须设置请求头)
4.  监听响应完成事件(在响应完成事件里面来获取响应体)
5.  发送请求

## PHP ##

PHP 是 PHP Hypertext Preprocessor(超文本与处理器)的首字母缩写。这种方法叫做递归缩写。

1.  PHP 有多种用途，特别是web网站开发。快速，灵活，实用使得php能够更好的开发任何网站。
2.  PHP 是一种 HTML 嵌入式的脚本语言。php文件以.php结尾。它的很多语法来自 C，Java 和 Perl，并具有几个
3.  PHP 独有的特点。该语言的主要目标是让 Web 开发人员快速地书写动态生成的网页。

作用：
     - PHP 能够在所有主流操作系统上使用，支持大多数web服务器，php能够作为CGI处理器来工作。
     - PHP 可以输出html, php,pdf,flash,xml。php能够自动生成这些文件，在服务端开辟出一块动态内容的缓存，可以直接把他们打印出来，或者将他们存储到文件系统中。
     - PHP 支持很大范围的数据库。使用抽象层如 PDO，或者通过 ODBC 扩展连接到任何支持 ODBC 标准的数据库。
     - PHP 支持利如 LDAP、IMAP、SNMP、NNTP、POP3、HTTP、COM（Windows 环境）等协议的服务。还可以开放原始网络端口，使得任何其它的协议能够协同工作。PHP 支持和所有 web 开发语言之间的 WDDX 复杂数据交换。关于相互连接，PHP 已经支持了对 Java 对象的即时连接，并且可以透明地将其用作 PHP 对象。
     - PHP 具有极其有效的文本处理特性，包括 Perl 兼容正则表达式（PCRE）以及许多扩展和工具可用于解析和访问 XML 文档。

**首先我将两者结合**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20200616123629528.png]

**那么如果你服务直接跳转到index.php路径 那么**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70 1]  
JS弹框正常显示 那让我们再看看index.html路径吧  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70 2]

这个时候你就会发现，弹框内容显示了，但是却是以html文件控制台打印输出方式呈现的，为什么我们直接拿响应体只会打印输出，而不会有弹框出现了？  
其实，**php给的响应体是前端的交互**，这样的**渲染方式**通俗的来说就是  
**直接调用php文件，php文件时直接作为前端交互，所以js弹框就能正常弹出，而采用了Ajax让html文件去调用php文件，这个时候php文件被提取后内容作为后端数据，无法进行正常的前端交互，那么php文件内容就只会在html文件中控制台打印输出了**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200616123606886.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2,size_16,color_FFFFFF,t_70
[20200616123629528.png]: https://img-blog.csdnimg.cn/20200616123629528.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020061612380030.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200616123917489.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2,size_16,color_FFFFFF,t_70