新手学习ajax

idisfkj 发布于2019-08-21 16:26 / 3169人阅读

摘要：对于前端新手的我来说，学习的过程有点痛苦。因为之前的学习全是只与前端有关的像呀这些都还不涉及与后台数据交互。然后学习看了很多书觉得还是有些懵。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。帮助新手理解是很不错的。

对于前端新手的我来说，学习ajax的过程有点痛苦。因为之前的学习全是只与前端有关的像css、js呀这些都还不涉及与后台数据交互。前段时间用JS做了一个2048小游戏。算是JS入门了用了很多排序相关的知识算法。
然后学习ajax看了很多书觉得还是有些懵。可能是我看的有点杂。HTTP协议、json、XML甚至还去看了点node.js
还是没把ajax搞清楚。不过还好在老师的工作室里，老师把他的服务器借给了用。我在他的服务器里建立了我的文件夹。哈哈哈今天总算明白了点。
今天整理一下

关于ajax

1.AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
2.通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个            
  网页的情况下，对网页的某部分进行更新。
3.传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

使用ajax

1.你得有一个服务器
2.服务器上放一个文件（新手用txt就好了，随便写点啥）
3.一个HTML前端页面
4.一个JS文件

我们来做一个小实验，ajax请求服务器上的text文件
建立ajax.html

再来是ajax.js

function Ajax(url,fnSucc,fnFaild)
             {
                  //1.创建ajax对象
                if(window.XMLHttpRequest)
                 {// code for IE7+, Firefox, Chrome, Opera, Safari
                      var oAjax=new XMLHttpRequest();
                 }
                else
                 {// code for IE6, IE5
                     var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
                 }
                 //2.链接服务器（打开服务器的连接）
                 //open(方法，文件名，异步传输)
                 oAjax.open("GET",url,true);
                 //3.发送
                 oAjax.send();
                 //4.接收返回
                 oAjax.onreadystatechange=function()
                    {
                      if (oAjax.readyState==4)
                      {
                        if(oAjax.status==200)
                          {
                            fnSucc(oAjax.responseText);
                          }
                       else
                          {
                           fnFaild(oAjax.status);
                          }
                      };
                 };
              }

read.text
(随便写点啥就好)
我是你的瑞雪呀！！啦啦啦这是ajax请求的数据

效果图

服务器上的文件

很简单对吧，点个赞支持一下吧

分割线

更新

最近看到一篇写的很好的Ajax教程，廖雪峰老师写的。我看了看，写的很详细，也比较简单。帮助新手理解是很不错的。放上链接http://javascript.ruanyifeng....

GPU云服务器云服务器新手学习 linux新手学习新手学习linux 新手学习java

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88550.html

vue 学习小结送给新手

摘要：只要数据发生改变，立即更新，由表单等带来的数据改变，数据相应字段也会发生相应改变。三界面的更新的输入，导致的值更新，元素内，任何表达式与有关的，都将重新计算，斌企鹅自动更新界面。作为组件化思维的先驱当年统计的组件多达多个。 Vue 是现在最火的前端JavaScript 开发框架。首先，接受它的思想 View 模板即html，静态界面Model 数据源模型界面所有的数据负责提供及管理...

terasum 2019-08-20 10:42 评论0 收藏0
十步零基础JavaScript学习路径

摘要：之前写过一篇天学通前端开发，内容主要讲的就是前端学习路径，今天再来写一篇零基础的学习路径，希望能帮编程零基础的前端爱好者指明方向。十框架三选一，零基础的初学者强烈推荐，如果是后台转前端推荐，如果技术型前端，推荐。之前写过一篇26天学通前端开发，内容主要讲的就是前端学习路径，今天再来写一篇零基础的JavaScript学习路径，希望能帮编程零基础的前端爱好者指明方向。一、开发环境和Ja...

incredible 2019-08-21 18:19 评论0 收藏0
前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
新手学JavaScript都要学什么？

摘要：要从事网页开发，不知从何下手会语言但是不知道该如何进阶最好的方法就是不断地做网页写代码，不断地看别人的代码，研究别人的代码用代码实践的每个技巧点多听多看多问多写学习要系统，也可以找一本超实用的代码段，仔细研磨每天记录自己的学习成果，别动不动要从事网页开发，不知从何下手？会JavaScript语言但是不知道该如何进阶！最好的方法就是不断地做网页、写代码，不断地看别人的代码，研究...

noONE 2019-08-21 10:18 评论0 收藏0
Vue.js新手入门指南[转载]

摘要：就是一个用于搭建类似于网页版知乎这种表单项繁多，且内容需要根据用户的操作进行修改的网页版应用。单页应用程序顾名思义，单页应用一般指的就是一个页面就是应用，当然也可以是一个子应用，比如说知乎的一个页面就可以视为一个子应用。最近在逛各大网站，论坛，以及像SegmentFault等编程问答社区，发现Vue.js异常火爆，重复性的提问和内容也很多，楼主自己也趁着这个大前端的热潮，着手学习了一...

MartinHan 2019-08-23 11:50 评论0 收藏0