填坑Ajax--基础概念

最新推荐文章于 2021-02-26 17:57:41 发布

没心没肺可苦可乐

最新推荐文章于 2021-02-26 17:57:41 发布

阅读量164

点赞数

本文链接：https://blog.csdn.net/qq_17492249/article/details/86579332

版权

本文详细介绍了Ajax的概念、作用及其实现方式，包括异步JavaScript和XML如何增强用户体验，使其无需重新加载整个网页即可显示新内容。文章还探讨了前端技术如HTML、CSS、JavaScript的作用，以及服务器端技术和网络相关概念。

摘要由CSDN通过智能技术生成

学Ajax是在上上周吧，当时大概是因为得了什么奇怪的病，上课完全不在状态，不知道自己在想啥一天天就那么过去了。希望以后能沉迷于学习、提升自我无法自拔，那些奇奇怪怪的情绪，太影响我拯救地球了。

Ajax是一个蛮酷的技术，趁着现在做的项目要用到，填一下对于Ajax这个知识点的坑。

概念

Ajax表示Asynchronous JavaScript and XML(异步JavaScript和XML)
作用：它使我们可以获取和显示新的内容而不必载入一个新的Web页面。增强用户体验，更有桌面程序的感觉。
Ajax可以做什么？

显示新的HTML内容而不用载入整个页面
提交一个表单并且立即显示结果
登录而不用跳转到新的页面
星级评定组件
遍历数据库信息加载更多而不刷新页面
……

Ajax主要特点

前端相关的技术点：

html（html5）主要用来实现页面的排版布局
css（css3）主要用来实现页面的样式美化
JavaScript（jQuery）主要用来实现前端功能特效

采用上面的这些技术开发的页面和前端特效脚本需要放到服务器才能够对外提供服务，才能够让互联网上的网友看到。

客户端与服务器

本质上都是计算机，只不过样子不同，配置不同，应用场景不同（安装的应用软件不同）

客户端主要用于普通上网用户
服务器主要给上网用户提供后台服务

网络相关概念

IP地址（唯一的确定互联网上的一台计算机）
域名 IP地址的别名，方便记忆
DNS 用于维护IP地址与域名的关系
端口用来确定计算机上的网络应用程序

通信协议理解

通信双方约定的规则

http/https 超为本传输协议
ftp 文件传输协议
smpt/pop3 邮件收发协议
......

搭建服务器环境

wamp/phpstudy...集成环境

windows 操作系统
Apache 提供静态资源服务（html页面、js文件、css文件、图片。。。）
MySQL 数据库
php 编程语言，可以用来开发网站

网站

网站由一系列页面组成（页面由js、css、图片、html标签。。。所有的这些文件都被称为资源）

静态网站

就是提前写好的html页面（包括图片、媒体文件。。。静态资源文件），并且部署到服务器上

静态网站主要存在的问题:

随着网站规模的增大可维护性逐渐降低
没有交互性

动态网站

动态指的是html页面是动态生成的，这里动态生成的不一定是一个完整的页面，有可能仅仅是页面的一部分，或者仅仅是数据(普通字符串、json、xml)

实现动态网站的技术：

php
java（jsp）
.net
Node.js
python
......

Ajax-php基础

虽然之前学过，还是简单的复习一下吧

php是一种后台编程语言；使用php可以开发动态网站和后台接口（所谓接口就是url地址，用于给前端提供数据）。

php基础语法

变量
字符串拼接
单引号与双引号
内容输出
数据类型
运算符
分支循环语句
函数
预定义变量（表单处理）

变量

变量以$开头字母/数字/下划线不能以数字开头，大小写敏感。

内容输出

echo：输出简单数据类型，如字符串、数值
print_r()：输出复杂数据类型，如数组
var_dump()：输出详细信息，如对象、数组

字符串拼接

js中字符串拼接用"+"；php中字符串拼接用"."

单引号与双引号

单引号中的变量会当作普通字符串处理
双引号中的变量会解析为变量值

运算符

与JavaScript基本类似

数据类型

字符串
整型
浮点型
布尔型
数组
对象
NULL

预定义变量（表单处理）

$_GET
$_POST

分支循环

if/switch
while
for
foreach

函数

自定义函数

语法规则（函数名不区分大小写）

系统函数

gettype()
json_encode()

铺垫终于铺完了好累啊学Ajax之前要学这么多东西

实现Ajax的基本思路

如何使用Ajax

步骤：

创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

准备发送

xhr.open('get','./xxx.php',true);

执行发送动作

xhr.send(null);

指定回调函数

xhr.onreadystatechange = function(){
  if(xhr.readyState == 4&&xhr.status == 200){
  var data = xhr.resopnseText;
if(data == '1'){ //登录成功

}else if(dara == '2'){//用户名或密码错误

    }
  }
}

/**
* xhr.readyState
* 0  xhr对象初始化
* 1  执行发送动作
* 2  服务器端数据已经完全返回
* 3  数据正在解析
* 4  数据解析完成，可以使用了

* xhr.status
* 200 数据相应正常
* 404 没有找到资源
* 500 服务器端错误
**/

未完待续?