Ajax基础知识点一

最新推荐文章于 2022-06-09 10:59:31 发布

Surpass-oneself

最新推荐文章于 2022-06-09 10:59:31 发布

阅读量214

点赞数

分类专栏： ajax javascript

本文链接：https://blog.csdn.net/qq_41882787/article/details/80035715

版权

javascript 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

ajax

1 篇文章 0 订阅

订阅专栏

一、有关客户端和服务器端的知识点

客户端是用户接受信息的平台分为浏览器、ＡＰＰ　应用软件，手机QQ、微博、邮箱等等。那他们是从哪里获取的数据的？那就需要说服务器，服务器是为谁服务的？为广大的网民提供服务，提供什么服务？提供用户需要的数据，比如一个网站的数据都保存服务器上，如果用户需要网站数据只需要发送请求就可以。根据不同的数据有不同的服务种类，有网页服务，使用的服务器是（Apache tomcat iis) 文件上传下载服务（vsftp) 邮件服务（postfix.....

二、计算机通信协议

什么是协议是计算机之间交流方规则，服务器本质上也是一个计算机，只是它是提供数据传输服务的计算机，它不知道疲倦，一天工作二十四小时，就是为了把后台传输给他们的数据。在用户的请求数据的时候传递数据。ajax返回的也是一个数据，ＨＴＴＰ协议也是围绕数据展开的协议。总之理解，数据是核心、传输协议是规则、计算机和服务器是主体。

那么我们知道那么多的数据，网络之间的计算机是怎么做到精准的传输数据，比如Ａ计算机请求新浪网站的数据，新浪的服务器是怎么识别是那台计算机发送的请求的呢？我们知道全国每个人都有唯一的什么，身份证，计算机也有。只是名字是ＩＰ地址。通过ＩＰ地址精确定位每个计算机，再通过端口找到计算机的应用程序。格式：xxx.xxx.xxx.xxx 但是ＩＰ地址实在是太长了。我们就把它转化为域名，方位http:///baidu.com/地址的时候，需要域名解析协议ＤＮＳ　解析得到是计算机的ＩＰ地址。网络上有几十台专门解析域名的服务器，我们的笔记本的ＨＯＳＴ中有常用的域名就不需要到外部服务器请求解析服务了。

三、配置网站服务器

计算机可以同时扮演两个角色，一个是计算机一个是服务器，装上Apache可以当服务器使用。

下载：wampSever　　w指的是windows a 指的是：Ａｐａｃｈｅ（提供网页服务的应用程序）　M指的是：mysql P 指的是PHP。

四、前端和后端的分工

前段和后端之间的关系，前端只是把整个网页的结构搭建起来，如果改变网页的内容，动态的传输用户需要的图片，更改网站的资源都是后台通过数据库动态生成的。工作流程是前端利用前端技术搭好网页框架、给需要的内容占有位置，方便后期传输数据

后端利用PHP JAVA .net把前端的内容拿过来。用上面的编程语言把数据填充进去上传到服务器。

有两种形式一种是：B/S 浏览器到服务器的数据传输模式，网站的维护都是在服务器上，可以即使更改数据，浏览器上的用户可以立刻看到数据的变化。

C/S：是客户端到服务器的模式。就如同手机APP只有下载更新之后才能，享受更新之后的服务。

五、同步和异步

浏览网页的两种数据更新方式：

1.白屏（同步）客户端请求数据的时候，浏览器是一直在等待，等待的过程中，存在的视差导致，数据没有传输进来。屏幕白屏的情况发生。如同老板让秘书叫小李做事，在秘书叫小李的过程中，老板是不工作的等待着小李的到来。

2.页面不刷新（异步）：局部的更新数据，不会全部刷新。异步不会阻塞操作的执行。

<body>

户名：<input type="text" name="username"><br>
密码：<input type="password" name="password"><br>
<input type="submit" value="提交">

</form>

</body>

表单提交之后返回到iframe中，主页的内容不变 iframe 是主页中添加一个子页面，返回的内容在target中。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax登录</title>
</head>

<body>
<div>
<div id="showInfo"></div>
<form id="form">
用户名：<input type="text" name="username" id="username"><br>
密码：<input type="password" name="password" id="password">
<input type="button" id="btn" value="登录">
</form>

</div>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById('btn');
btn.onclick = function(){
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;

//第一步：创建对象
//秘书出场
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//初始化
//准备好了
var url = './check.php?username='+username+"&password="+password;
xhr.open('post',url,false);

//这段代码在xhr.send();执行完之后才能执行
//这件事做完了怎么办
//事情办完之后干什么
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
alert(1);
var data = xhr.responseText;
if(data == 1){
document.getElementById('showInfo').innerHTML = '用户名或者密码错误';
}else if(data == 2){
document.getElementById('showInfo').innerHTML = '登录成功';
}
}
};
}

//实际的去做这件事
//去做这件事情
xhr.send(null);
alert(2);
}

}

</script>
</body>
</html>

Surpass-oneself

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Ajax基础知识点一

一、有关客户端和服务器端的知识点客户端是用户接受信息的平台分为浏览器、ＡＰＰ　应用软件，手机QQ、微博、邮箱等等。那他们是从哪里获取的数据的？那就需要说服务器，服务器是为谁服务的？为广大的网民提供服务，提供什么服务？提供用户需要的数据，比如一个网站的数据都保存服务器上，如果用户需要网站数据只需要发送请求就可以。根据不同的数据有不同的服务种类，有网页服务，使用的服务器是（Apache tomcat...
复制链接

扫一扫