使用xhr发起ajax请求 发起get请求 // 1. 创建 XHR 对象 var xhr = new XMLHttpRequest() // 2. 调用 open 函数 xhr.open('GET', 'www.escook.cn:3006/api/getbook…') // 3. 调用 send 函数 xhr.send() // 4. 监听 onreadystatechange 事件 xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { // 获取服务器响应的数据 console.log(xhr.responseText) } }
发起post请求 // 1. 创建 xhr 对象 ： var xhr = new XMLHttpRequest() // 2. 调用 open() xhr.open('POST', 'www.liulongbin.top:3006/api/addbook') // 3. 设置 Content-Type 属性（固定写法） xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') // 4. 调用 send()，同时将数据以查询字符串的形式，提交给服务器 xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社') // 5. 监听 onreadystatechange 事件 xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText)}} 数据交换格式 数据交换格式是指服务器端与客户端之间进行数据传输与交换的格式 前端经常提及的数据交换格式分别是XML和JSON， XML:EXtensible Markup Language可扩展标记语言 XML和HTML虽然都是标记语言但是两者没有关系 XML被设计用来传输和储存数据，是数据的载体，但各式臃肿和数据无关代码多，体积大，传输效率低，js中解析比较麻烦 HTML被设计用来描述网页上的内容，是网页内容的载体 JSON:全称JavaScript Object Notation即 'JavaScript对象表示法;就是JS的对象和数组的字符串表示法，它使用文本表示一个JS对象或数组的信息，因此Json的本质是字符串 作用：JSON是一种轻量级的文本数据交换格式，在作用上类似XML，但更小，更快，更容易解析 JSON的两种结构：对象结构和数组结构 属性名必须使用双引号包裹 字符串类型的值必须使用双引号包裹 JSON中不允许使用单引号表示字符串 JSON中不能写注释 JSON的外层必须是对象和数组格式 不能使用undefined或函数作为JSON的值 JSON和JS对象的互转 JSON的字符串转为JS对象，使用JSON.parse('{"a": "Hello", "b": "World"}') 把数据对象转换为字符串的过程，叫做序列化 JS对象转为JSON字符串，使用JSON.stringfy({a: 'Hello', b: 'World'})) 把字符串转换为数据对象的过程，叫做反序列化 form表单属性 action 指定表单提交地址，不加默认是当前网页 target :指定是在当前窗口打开（默认_self），或则在新的空白窗口打开（_blank） 其它还有不常用的_praent在父框架集中打开， _top在整个窗口中打开， framename在指定的框架中打开 method:以何种方式提交表单数据到action URL, 有两个可选值get 和post .默认是get get方式是以拼接字符串的形式?name=zs&age=18拼接在url地址栏后面 post 方式是以Form Date的形式提交的，比较隐蔽，安全 enctype:用来规定在发送表单之前以何种方式对数据进行编码；enctype可选值有3个 application/x-www-form-urlencoded表示在发送前编码所有字符（默认值） multipart/form-data:不对字符进行编码，在使用包含文件上传控件的表单的时候，必须使用该值 text/plain:空格转换为“+”加号，但不对特殊字符进行编码（很少用） 表单同步提交缺点 form表单同步提交后，整个页面会发生跳转，跳转到action URL所指向的地址 form表单同步提交之后，页面之前的状态和数据会丢失 解决方案，表单只负责采集数据，Ajax负责将数据提交到服务器 jQuery监听表单提交事 ("#form") .submit(function(e){e.preventDefault()} ("#form") .on('submit', function(e){e.preventDefault()} jQuery提供了("#form" )serialize()函数可以快速获取表单里面的数据 在使用serialize()函数快速获取扁担数据的时候的必须为每个表单元素添加name属性 模板引擎 优点： 减少了字符串拼接操作 使代码结构更清晰 使代码易于阅读与维护 art-template使用 导入art-tempalte ( <script src="./lib/template-web.js"></script>) 定义数据 var data = { name: 'zs', age: 20, test: '<h3>测试原文输出</h3>', flag: 1, hobby: ['吃饭', '睡觉', '写代码'], regTime: new Date() } 定义模板 <div id="container"></div> <script type='text/html' id = "tpl-user"> content <script> 调用template函数 let htmlStr = template("tpl-user",data) 渲染HTML结构 ("#container").html(htmlStr)
