初识Ajax(序章)——同步与异步

前言:

        经过一段时间的学习和练习初步掌握了ajax,在学习的过程中对重要的知识点进行了整理,发布在csdn上以做“备忘录”,同时希望可以帮助到那些初入前端,对ajax还未掌握或不熟练的学子。本人目前还是大二学生,所学不过皮毛,若文中有错误还请大神能包涵、指教,在此衷心感谢。在学习过程中将之分成了五个部分,由浅入深,从同步→异步、从原生ajax→自己封装ajax→jq框架中ajax的使用,以及数据传输格式xml、json.....此文是ajax前置内容:同步和异步,主要记录同步异步区别、同步表单方式发送数据、数据传送的两种方式:get、post,get与post的区别等。为帮助初学ajax者之后更容易理解,大神请略过。好了,废话不多说了,以下正文:

正文:

在学习ajax前你需要掌握的技能:

  • HTML / XHTML
  • CSS
  • JavaScript / DOM

若尚未掌握以上技能不建议开始学习ajax,因为缺乏这些基础知识学习ajax你将会事倍功半!

什么是ajax?

        Ajax不是一门新技术,是旧技术的新应用。Ajax即: 异步 JavaScript XMLAsynchronous JavaScript and XML)。简单的来说,就是:在不重载网页的情况下与服务器进行数据交互,并将返回的数据进行有效的处理。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面,这对于用户体验十分不好。

同步与异步:

        通过以上对ajax的简介,可以初步知道ajax的作用,对其中关键字已用红色标出:异步、数据交互。那么什么是同步、异步

        步:顺序处理,即当我们向服务器发出一个请求时,在服务器没返回结果给客户端之前,将会一直处于等待状态直至服务器将结果返回到客户端,才能执行下一步操作。

        异步:并行处理,当我们向服务器发出一个请求时,在服务器没返回结果之前,我们还是可以执行其他操作。ajax技术就是典型的异步请求。

同步form表单交互数据:

        对于ajax你或许并不熟,但对于html中最最最基础的form表单你一定很熟悉,form表单是最典型的同步数据交互,接下来回顾一下form表单交互数据,你获取会很疑惑:不是说ajax吗?怎么扯到了form表单上,请耐心看完,你会明白我为什么要先说form表单。

        form表单中的input类型共有:text,password,button,submit,reset,radio,checkbox,image,file,以及文本域:textarea他们中大部分都是用来供用户提供(输入)数据的,表单中有两个功能按钮:submit,reset。submit:提交数据,当点击此按钮后数据将会被提交到后端。reset:重置按钮,点击此按钮所有填写的数据将会被清空重填。

form表单的常用属性
属性名 属性值 实例
action 指定数据要传向的url地址 action="./php/data.php"
method 指定数据发送方式(get/post)。注:若为get可省略,默认为get方式 method="get"
enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。(文件上传必须用到) enctype="multipart/form-data"

注:表单元素需要提交的属性使用name属性进行标记。Name属性的值可以随便起,但应当遵循命名原则尽可能起的有意义。

form表单的两种提交方法:

get方式:指定method为get即可,可省略默认为get。由于代码很基础,因此直接贴图片了:

扫描二维码关注公众号,回复: 1129986 查看本文章


界面图:


姓名输入:哈哈,提交后结果图:


后端为php语言,代码如下:


如下,若提交后服务器返回数据乱码,其原因一般是后端   程序没有指定文件编码,后端指定编码为utf8即可。


指定编码方式如下:

post方式

    Post方式发送数据只需将form表单的method属性值改为post即可,其他不变。此时后端接收数据则通过post方式接收。


后端php代码:


通过form上传文件:

    上传文件需要用到<inputtype="file">form 表单需要设置enctype="multipart/form-data"属性


上传成功后:


后端php代码:


getpost方式比较:

    get方式:

    1:相对与post来说简单方便。

    2:提交数据存在于url中,因此十分危险!

    ps:曾经玩过一款wap页游,该游戏便是完全采用get方式,通过修改url玩家可随意刷各种物品!

    3:get方式理论上来说提交数据也没有长度限制,但实际上很多的数据不可能全部拼接在url中。故而有长度限制。

 post方式:

    1:提交的数据不在url中,因此安全性相对来说更好一些。

    2:post提交数据没有长度限制,浏览器端 只要你想可以随意添加,服务器端可以选择是否接收这么长的数据。

    3:如果上传文件必须使用post。

 综上简单比较后得出结论:get方式不适合传很长的,机密的数据,使用较少。通常来说传数据都是通过post方式,get方式一般用来取数据。


上述内容和ajax有什么关系?为什么要先说这些?

或许看完本文后你会很疑惑,不是讲ajax吗,为什么会先说这些东西?欲速则不达!本文是前置序章,主要是为那些基础不扎实,初入前端即将学习ajax的小白写的,主要目的是先说同步,get/post以帮助小白之后更好的理解异步,ajax。下一篇将会正式 记录原生ajax的相关内容,若有错误还请大神包涵,指教!

初识ajax(初章)——ajax5步,原生ajax链接:初识ajax——原生ajax及ajax封装

猜你喜欢

转载自blog.csdn.net/qq_41558265/article/details/80480805
今日推荐