模板引擎和Ajax

2023-09-14 05:54| 来源: 网络整理| 查看: 265

模板引擎 : 将数据转化成html格式的字符串 1.准备数据 2. 下载, 导入js文件 3.创建模板在html页面中创建

4.把数据使用在模板中在js中 template(要关联模板的id, 数据:要求–>必须是对象) 5.这个方法会返回html格式的字符串注意 : 模板内部中不能使用全局变量

//解决模板不能访问全局对象的问题 template.helper("getConsole", function () { return console; }) var data = [ { "username": "张三", "password" : "1237756" ,"age": 20}, { "username": "张四", "password" : "123886" ,"age": 21}, { "username": "张五", "password" : "123996" ,"age": 22}, ] var html = template("template", {list : data}) console.log(html); $("table").html(html);

创建模板

效果图在这里插入图片描述

Ajax

全称：Asynchronous JavaScript and XML（异步的js和XML）用途：通过JS语言向服务器请求数据。

什么是ajax?---->js向服务器请求数据，实现异步请求，局部刷新。

原生js中ajax使用步骤

第一步：创建对象

var xhr = new XMLHttpRequest(); 1

为了兼容低版本的IE浏览器，需要实例化

var xhr = new ActiveXObject(‘Microsoft.XMLHTTP’); 1

因此，常用的写法是

if (window.XMLHttpRequest){ //谷歌、火狐、IE11 var xhr=new XMLHttpRequest(); } else { //ie8及之前版本 var xhr=new ActiveXObject('Microsft.XMLHTTP') }

第二步：准备及发送，利用对象的open()和send()方法，发送数据

xhr.open(‘请求方式’,’请求地址’,’同步或异步’); get请求数据 xhr.open('get',url,true); xhr.send(); post请求数据注意：如果是post提交,在发送请求之前设置一个头 xhr.open('post',url,true); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); var param='username='+username; xhr.send(param);

第三步：回调函数onreadystatechange()

xhr.onreadystatechange=function () { if (this.readyState!=4) return; console.log(this.responseText); }

xhr对象的相关属性 xhr.readyState的值分别代表的含义：

0 xhr对象初始化1 执行发送动作2 服务器端数据已经完全返回3 数据正在解析4 数据解析完成，可以使用了

xhr.status

200 数据相应正常404 没有找到资源500 服务器端错误

服务器返回数据类型

xhr.responseXML：返回XML格式数据。（不常用）xhr.responseText：返回字符串格式数据。

ajax中的同步与异部：

发送send()方法后，去服务器端请求数据，此时代码接着在主线程中往下执行，那么就是异步（非阻塞）。如果请求数据后，一直等待着数据从服务器端返回，才再次执行，此时就是同步（阻塞）

jQuery的Ajax使用

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

其中：

url：代表请求的服务器端地址 data：代表请求服务器端的数据（可以是key=value形式也可以是json格式） callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行） type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）常用的返回类型：text、json、html等 $.ajax( { option1:value1,option2:value2… } ); $.ajax({ type:'请求类型get/post', url:'请求地址', data:'向服务器端传递的参数', dataType:'要求服务器端返回的类型,常用text和json, success:function(data){},//'请求成功的回调函数', error::function(data){},//'请求失败的回调函数', //不常用 async:'是否异步，bool，默认是true代表异步, complete(xhr,status):'请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）' })

ajax请求数据，必须遵循同源策略

同源策略

同源策略是浏览器的一种安全策略，所谓同源指的是请求URL地址中的协议、域名和端口都相同，只要其中之一不相同就是跨域同源策略主要为了保证浏览器的安全性在同源策略下，浏览器不允许Ajax跨域获取服务器数据

常见解决ajax跨域的方式：jsonp，cors等

【本文地址】

公司简介

联系我们