Ajax基础

客户端与服务器

上网的本质目的：通过互联网的形式来获取和消费资源

服务器

上网过程中，负责存放和对外提供资源的电脑

客户端

上网过程中，负责获取和消费资源的电脑

URL地址

统一资源定位器，用于标识互联网上每个资源的唯一存放位置

组成部分：（http://www.liulongbin.top:3006/api/getbooks）

1.客户端与服务器之间的通信协议 http

2.存有该资源的服务器名称www.liulongbin.top:3006

3.资源在服务器上具体的存放位置api/getbooks

通信过程

请求--处理--响应

数据请求

网页中的数据也是服务器对外提供的一种资源

数据是网页的灵魂

网页请求服务器中数据资源，需用到XMlHttpRequest对象

XMlHttpRequest简称xhr是浏览器提供的js成员

最简单的用法：

var xhrObj=new XMlHttpRequest（）

请求方式，常见的请求方式为get和post

get请求是获取服务端资源 例如：根据URL向服务器获取HTML文件、数据资源等

post请求是向服务器提交数据 例如：向服务器提交的登录信息、注册信息、用户信息等数据提交操作

Ajax

什么是Ajax：在网页中利用XMlHttpRequest对象和服务器进行数据交互的方式

全称Asynchronous JavaScript And XMl（异步JavaScript和XML）

Ajax能让我们轻松实现网页与服务器之间的数据交互

jQuery中的Ajax

因为浏览器中原生的XMlHttpRequest用法比较复杂，所以jQuery对XMlHttpRequest进行了封装，提供了一系列Ajax相关的函数，极大的降低了Ajax的使用难度

jQuery中发起Ajax请求的最常用的三个方法：

$.get()获取

$.get(url,[data],[callback])

url：要请求的资源地址

数据类型：string

data ：请求资源期间要携带的参数

数据类型：object

callback ：回调函数

数据类型：function

$.get()发起不带参数的请求，直接提供请求的URL地址和请求成功后的回调函数

$.get()发起带参数的请求，提供请求的URL地址和请求成功后的回调函数，通过参数筛选满足条件的属性

$.post)()发送

$.post(url,[data],[callback])

data是发送的数据

callback是响应回来的数据

$.ajax()既可以获取也可以发送

$.ajax({

type:'',//请求的方式，例如 GET或POST

url:'', //请求的 URL 地址

data:{ },//这次请求携带的数据

success:function(res){ }//请求成功之后的回调函数

})

接口

使用Ajax请求数据时，被请求的URL地址，就叫做数据接口（接口）。

注：每个接口必须有请求方式

接口请求过程：请求--处理--响应

接口测试工具：

好处：不写任何代码，对接口进行调用和测试

下载并安装PostMan 官网：Download Postman | Get Started for Free 直接安装即可

接口文档：接口的说明文档，是我们调用接口的依据

接口文档可以包含很多信息，一个合格的接口文档应该包含：

接口名称：如--登录接口，获取图书列表接口等

接口URL：地址

调用方式：用GET还是POST

参数格式：需传递的参数--必须包含参数名称、参数类型、是否必选、参数说明

响应格式：返回值的详细描述--一般包含数据名称、数据类型、说明

返回示例（可选）：通过对象的形式，列举服务器返回数据的结构

注：书写代码时，必须遵照接口文档内容书写（属性名、接口URL等）

form表单的基本使用

作用：主要负责数据采集功能

form标签的属性是用来规定如何把采集到的数据发送到服务器

action URL地址

规定当提交表单时，向何处发送表单数据

未指定action 属性值的情况下，action的默认值为当前页面的URL地址

注：当提交表单后，页面会立即跳转到action属性值指定的URL地址

<form action="/login">
    <input type="text" name="email_or_mobile" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
</form>

method

规定以何种方式把表单数据提交到action URL

get 默认情况下

post 不会将提交的数据显示在URL中

注：get适合提交少量、简单的数据

post 适合提交大量、复杂、或包含文件上传的数据（常用）

<form action="/login" target="_self" method="GET">
    <input type="text" name="email_or_mobile" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
</form>

enctype

规定在发送表单数据之前如何对其进行编码

application/X-www-form-urlencoded 默认情况，在发送前编码所有字符

multipart/form-data 不对字符编码 在使用包含文件上传控件的表单时必须使用该值

text/plain 空格转换为 ‘ +’ 加号，但不对特殊字符编码（很少用）

target

规定你在何处打开action URL

_self 默认情况下，表示在相同框架中打开action URL（常用）

_blank 在新窗口中打开（常用）

_parent 在父框架中打开

_top 在整个框架中打开

framename 在指定框架中打开

<form action="/login" target="_self">
    <input type="text" name="email_or_mobile" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
</form>

表单的同步提交及缺点

点击submit按钮触发表单提交操作，页面跳转action URL的行为，叫做表单同步提交

缺点：

提交后，页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差，页面之前的状态和数据会丢失

解决方法：表单只负责采集数据，Ajax负责将数据提交到服务器

通过Ajax提交表单数据

<form id='form1'>    

   <input type='text' name='username'/>    

   <input type='password' name='password'/>    

   <button type='submit'>提交</button>

</form>

监听表单提交事件（submit）

$('#form1').on('submit', function(e) {  //...其他代码 });

阻止表单的默认行为（跳转页面）

e.preventDefault();

当监听到的提交事件以后，调用对象的event.preventDefault()函数，阻止默认行为

快速获取表单中的数据 serialize()函数

$('#form1').serialize() //调用的结果： //username=用户的值&password=密码的值

注：在使用serialize（）函数时，必须为每个表单元素添加name属