Ajax的入门

1.服务器和客户端

服务器：在Internet中，负责存放和对外提供资源的电脑

客户端：在Internet中，负责获取和使用消费资源的电脑

服务器的本质就是电脑

1.1URL地址

URL统一资源定位符，用于标识互联网上面每个资源的唯一存放位置，浏览器通过URL地址才能正确定位到资源存放的位置。

1. • 2URL的组成

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

2. 存放该资源的服务器名称

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

1.3 服务器的通信过程

1.4 资源类型

文字资源

图片资源

音频资源

视频资源

图标资源

数据资源

HTML是页面的骨架

CSS是页面的颜值

JavaScript是页面的行为

数据是页面的灵魂，上面三个都是为数据而服务

1.5请求方式

在网页上面请求服务器的数据资源，需要使用XMLHttpRequest对象，XMLHttpRequest对象是浏览器提供的js对象，可以通过它请求到服务器的数据资源

简单用法：var obj=new XMLHttpRequest();

1. get方式：通常用于向服务器获取资源

2. post方式：通常用于向服务器提交资源

2.AJAX

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

在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式就是Ajax

2.1 应用场景

• 用户名检测

• 搜索提示

• 数据的分页显示

• 数据的增删改查等

2.2jQuery中的Ajax

常见三种方法

1. $.get()

用来发起get请求，向服务器发起请求获取数据

参数名	参数类型	必选项	说明
url	String	是	要请求的资源地址
data	object	否	请求资源时携带的参数
callback	function	否	请求成功的回调函数

2. $.post()

参数名	参数类型	必选项	说明
url	String	是	要请求的资源地址
data	object	否	请求资源时携带的参数
callback	function	否	请求成功的回调函数

3. $.ajax(

type：‘’，//请求方式

url：‘’，//请求的url地址

data：‘’，//携带的数据

success：function(res){

}//请求成功之后回调的函数

)

2.2.1 form表单

1. • 组成

1. 表单标签

2. 表单域：文本框、密码框、隐藏域、多选文本、复选框、单选框、下拉选择框、文件上传框等

3. 表单按钮

2. • 属性

属性	说明	值	描述
action	规定提交表单时向何处发送
target	在何处打开actio_URL	_blank	新窗口
		_self	在相同的框架打开
		_parent	在父框架打开
		_top	在整个窗口打开
		framename	在指定框架打开
method	提交方式	post	安全性高
		get	安全性不高
enctype	发送表单数据之前对数据进行编码	application/x-www-form-urlencoded	发送之前编码所有字符（默认）
		multipart/form-data	不对字符编码 使用文件上传表单控件时必须使用该值
		text/plain	空格转换成+ ,但不对特殊字符编码

3. • 表单的同步提交

通过点击submit按钮，触发表单提交操作，使得页面跳转到action URL 的行为，称为表单的同步提交

缺点：

1. 提交表单后，页面整个跳转，跳转到action URL 所指向的页面，用户体验差

2. 提交之后，当前页面的状态和数据会丢失

解决：

表单只负责采集数据，Ajax负责将数据提交到服务器

$().on('submit'，function(){})

阻止表单的默认提交实践

$().on('submit'，function(e){

e.preventDefalut();

}）

2.2.2模板引擎 art-template

标准语法：{{}}

1. 原文输出：{{@ value}} 用于value中含有HTML标签

2. 条件输出： {{ if else}} 按需输出

3. 循环输出: {{each arr }}{{ $index }} {{$value}} {{}/each}

4. 过滤器： {{value|filterName }}

template.defalut.imports.filterName=function(value){}

2.2.3正则

1. exce()函数用于检索字符串中的正则表达式的匹配

如果满足条件返回匹配值，反之返回null

RegExpObject.exce(string)

2. replace()函数用于字符串中的一些字符替换另一些字符

2.3XMLHttpRequest的基本使用

2.3.1使用xhr发起GET请求

步骤：

1. 创建xhr对象

2. 调用xhr.open()函数

3. 调用xhr.send()函数

4. 监听xhr.onreadystatechange事件

2.3.2url编码和解码

url只允许出现英文字符，数字

若有中文则需要编码encodeURI（）

解码;decodeURI（）

2.3.3使用xhr发起POST请求

步骤：

1. 创建xhr对象

2. 调用xhr.open()函数

3. 设置Content-Type属性

4. 调用xhr.send()函数

5. 监听xhr.onreadystatechange事件

2.3.4数据交换格式

客户端和服务器之间的数据交换格式，XML和json

1. xml：可拓展标记语言

XML和HTML的区别

XML和HTML虽然都是标记语言，但是，它们两者之间没有任何的关系。

●HTML被设计用来描述网页上的内容，是网页内容的载体

●XML被设计用来传输和存储数据，是数据的载体

缺点:格式臃肿，与数据无关代码多，体积大，传输效率低

在js解析xml比较麻烦

2. Json （JavaScript Object Notation JavaScript对象表示法） 本质字符串

更小更快更容易解析

json的对象结构：

3. 对象{ key：value，key：value}

4. 数组

5. JSON语法注意事项

①属性名必须使用双引号包裹

②字符串类型的值必须使用双引号包裹

③JSON中不允许使用单引号表示字符串

④JSON中不能写注释

⑤JSON的最外层必须是对象或数组格式

⑥不能使用undefined或函数作为JSON的值

JSON的作用:在计算机与网络之间存储和传输数据。

6. js对象和json转换

• JSON.parase（json格式）

• JSON.stringify(js对象)