1. 使用jQuery调用ajax

在使用原生JS代码实现ajax的时候需要完成5个步骤,这些步骤为基础流程,我们可以自己封装成一个函数,在函数中进行对请求方式的判断来实现不同请求方式时的功能.但是我们自己封装的没有进行过大量使用的测试,所有会存在诸多问题.而在jQuery中已经给我们封装了有关ajax的各种使用方法,这里就是介绍这些方法的使用.

1.1 $.ajax([settings])

向服务器发送请求,请求数据.

这个方法是jQuery底层实现AJAX,在需要设置一些不常用的选项时使用.

它的参数[settings]为配置ajax请求的键值对集合.

其中常用的有:

url:请求报文发往的地址;

type:请求的方式,post或get,默认值为get;

data:发送至服务器的数据,如果需要发送多个数据的话,使用对象属性:属性值的集合;

datatype:需要服务器返回的数据类型,可以设置许多不同格式,如text,json,xml,html等

success:请求成功后需要执行的函数,函数中的参数是通过服务器返回的数据;

beforeSend:发送请求前执行的函数,可以修改ajax对象;

error:请求失败后执行的函数,可以在请求失败后设置一些提示错误原因的内容.

它还有许多属性及方法,在具体要求进行对这些属性和方法的调用和修改.

1.2 $.get(url,data,success(response,status,xhr),dataType)

$.get是$.ajax的一个简单版本,直接发送get方式的请求,并且它的参数只有url,data,success,dataTpye,并且这些参数的使用方法和$.ajax一致.

1.3 $.post(url,data,success(data, textStatus, jqXHR),dataType)

$.post是$.ajax的一个简单版本,直接发送post方式的请求,并且它的参数只有url,data,success,dataTpye,并且这些参数的使用方法和$.ajax一致.

2. 模板引擎

2.1 原理

我们在对服务器返回的数据进行处理的时候,在需要将数据呈现到页面中时会需要将数据和标签进行整合,而之前我们只能通过字符串的拼接后在html中将字符串解析成标签,再渲染出来.但是现在只是在数据较少的前提下使用字符串的拼接,如果请求的数据较多时再使用字符串拼接数据的话或是开发效率急剧降低.

我们从服务器中获得的数据会填写到一些指定的标签中,除了需要填写的部分以外,其他的都会是不变的内容,我们可以先将不变的部分写出来,并在需要填写的地方写入一些特殊的符号作为占位符,在数据传入后在进行替换.

而这些特殊的符号并没有规律可循,所以我们就可以将特殊的符号使用正则表达式来替换.

模板引擎就是通过查找我们创建的不变的部分,查找需要替换的部分,将传入的数据填写至指定的位置,最后生成的是一个字符串,我们需要将这个字符串添加到html中指定的地方,通过html来进行解析和渲染.

2.2 使用步骤

2.2.1 调用模板引擎

模板引擎其实是一个JS文件,是使用JS元素代码封装的一个JS文件,所以调用模板引擎时直接调用就可以了.

2.2.2 定义模板

定义模板是在一个新的script标签中定义,写的是需要填写数据的标签结构,在需要填写数据的位置写入<%=name%>格式的内容,name是对应数据中的key的名字.

2.2.3 调用模板引擎

使用模板引擎将数据写入定义的模板,最后生成一个字符串,将生成的字符串添加至页面的指定位置,html解析后渲染出来.

2.3 功能

模板引擎可以极大的降低开发中重复拼接字符串引起的效率较低的问题.尤其像现在的网站更多的是通过服务器响应的数据进行动态的创建页面.

Ajax拓展