HTTP服务&AJAX编程

蔚落 2022-12-29 06:42 45阅读 0赞

# 服务器端渲染和客户端渲染的区别 #

`本质区别：渲染的位置不同`

因为数据是变化的，需要将数据和结构分离，后期拿到数据之后，还需要将数据填充到结构中

将数据填充到结构中的过程，就叫`渲染`

客户端渲染 ajax：把数据在静态页面中进行填充

服务器端渲染 php：把数据在后台页面中进行填充

根据渲染的位置不同，将渲染分为：服务器端渲染和客户端渲染

## 客户端渲染 ajax ##

1.  向服务器请求静态html页面
2.  服务器返回所请求的html页面
3.  浏览器发现里面有相应的js代码，所以就去执行
    
    让异步对象再次发送数据请求
4.  服务器会返回相应的数据
5.  在html页面中根据数据动态的生成页面结构
6.  客户端渲染展示

## 服务器端渲染 php ##

1.  向服务器发送页面请求
2.  服务器获取数据
3.  根据数据动态的生成页面结构
4.  再将页面结构返回
5.  前台拿到完整页面结构，实现展示

# 第1章 AJAX编程 #

## 1.1 Ajax是什么？ ##

即 `Asynchronous Javascript And XML`，AJAX 不是一门的新的语言，而是对现有技术的综合利用。

1.  基于web标签的xhtml+css
2.  可以使用dom进行动态的显示和交互
3.  使用XML和XSLT(是一种用于将XML转换任意文本的描述语言)进行数据的交换和操作
4.  使用XMLHttpRequest进行异步的数据查询和检索等操作

本质:是在HTTP协议的基础上以异步的方式通过XMLHttpRequest对象与服务器进行通信。

作用：可以在页面不刷新的情况下，请求服务器，局部更新页面的数据；

## 1.2 什么是异步？ ##

指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序`不依赖程序本身的书写顺序`，相反则为同步。

其优势在于不阻塞程序的执行，从而提升整体执行效率。

同步：同一时刻只能做一件事，上一步完成才能开始下一步

异步：同时做多件事，效率更高。`XMLHttpRequest`可以以异步方式的处理程序。

## 1.3 XMLHttpRequest是什么？ ##

`浏览器内建对象`，用于在后台与服务器通信(交换数据) ，由此我们便可实现对网页的部分更新，而不是刷新整个页面。

### 1.3.1 异步对象发送get请求的流程： ###

### 1.3.2 异步对象发送post请求的流程： ###

### 1.3.3 API 详解 ###

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>xhr.open()</td> 
   <td>发起请求，可以是get、post方式</td> 
  </tr> 
  <tr> 
   <td>xhr.setRequestHeader()</td> 
   <td>设置请求头</td> 
  </tr> 
  <tr> 
   <td>xhr.send()</td> 
   <td>发送请求主体get方式使用xhr.send(null)</td> 
  </tr> 
  <tr> 
   <td>xhr.onreadystatechange = function () {}</td> 
   <td>监听响应状态</td> 
  </tr> 
  <tr> 
   <td>xhr.status</td> 
   <td>表示响应码，如成功 200</td> 
  </tr> 
  <tr> 
   <td>xhr.statusText</td> 
   <td>表示响应信息，如OK</td> 
  </tr> 
  <tr> 
   <td>xhr.getAllResponseHeaders()</td> 
   <td>获取全部响应头信息</td> 
  </tr> 
  <tr> 
   <td>xhr.getResponseHeader(‘key’)</td> 
   <td>获取指定头信息</td> 
  </tr> 
  <tr> 
   <td>xhr.responseText、xhr.responseXML</td> 
   <td>都表示响应主体</td> 
  </tr> 
 </tbody> 
</table>

readstate 属性有五个状态：

*  xhr.readyState = 0时，（未初始化）还没有调用send()方法
 *  xhr.readyState = 1时，（载入）已调用send()方法，正在发送请求
 *  xhr.readyState = 2时，（载入完成）send()方法执行完成，已经接收到全部响应内容
 *  xhr.readyState = 3时，（交互）正在解析响应内容
 *  xhr.readyState = 4时，（完成）响应内容解析完成，可以在客户端调用了

## 1.5 JSON ##

即 JavaScript Object Notation，另一种轻量级的文本数据交换格式，独立于语言。

### 1.5.1 语法规则 ###

1、数据在名称/值对中

2、数据由逗号分隔(最后一个健/值对不能带逗号)

3、花括号保存对象；方括号保存数组

4、使用双引号

## 1.6 封装AJAX工具函数【重点】 ##

`ajaxTool.js文件`：为了提升我们的开发效率，我们自已将`XMLHttpRequest`封装成一个函数。

// ajax调用方法：引入ajaxTool.js文件
     $.ajax({ 
          type: "get",
          url: "",
          data: { },
          success: function (result) { 
            console.log(result);
          }
        })

## 1.7 jQuery中的Ajax 【重点】 ##

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$.ajax({})</td> 
   <td>可配置方式发起Ajax请求</td> 
  </tr> 
  <tr> 
   <td>$.get()</td> 
   <td>以GET方式发起Ajax请求</td> 
  </tr> 
  <tr> 
   <td>$.post()</td> 
   <td>以POST方式发起Ajax请求</td> 
  </tr> 
  <tr> 
   <td>$(‘form’).serialize()</td> 
   <td>序列化表单（即格式化key=val&amp;key=val）</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>接口地址（请求资源的路径）</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>请求方式</td> 
  </tr> 
  <tr> 
   <td>timeout</td> 
   <td>请求超时</td> 
  </tr> 
  <tr> 
   <td>dataType</td> 
   <td>服务器返回格式</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td>发送请求数据</td> 
  </tr> 
  <tr> 
   <td>beforeSend:function () {}</td> 
   <td>请求发起前调用</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>成功响应后调用</td> 
  </tr> 
  <tr> 
   <td>error</td> 
   <td>错误响应时调用</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>响应完成时调用（包括成功和失败）</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

[jQuery Ajax介绍][jQuery Ajax]

# 第2章 模板引擎 #

原生模板 template\_native.js 或者 简洁模板：template.js

作用：渲染数据时 代替 拼接字符串的操作

## 2.1 流行模板引擎 ##

[BaiduTemplate][]

[ArtTemplate][]

[未知模板][Link 1]

[velocity.js][]

[Handlebars][]

[未知链接][Link 2]

## 2.2 artTemplate（腾讯出品） ##

art-Template原生js模板语法：

1.引入插件：template\_native.js

2.逻辑表达式：<% 逻辑表达式 %>

art-Template简洁js模板语法：

1.引入插件：template.js

2.逻辑表达式：\{ \{ 逻辑表达式 \}\}

1、引入template-web.js

2、在\{ \{ \}\}中包含js代码

3、语法：

Js代码包含在\{ \{ \}\}中

\{ \{data.key\}\}

\{ \{data\[‘key’\]\}\}

\{ \{a ? b : c\}\}

条件判断语句：

\{ \{if value\}\} … \{ \{/if\}\}

\{ \{if v1\}\} … \{ \{else if v2\}\} …\{ \{/if\}\}

循环遍历：既可以变量数组还可以变量对象

\{ \{each target \}\}

\{ \{ KaTeX parse error: Expected 'EOF', got '\}' at position 6: index\}̲\} \{ \{ value\}\}

\{ \{/each\}\}

函数：var str = template（模板id,数据对象）：返回动态生成的页面结构

template函数会根据模板id，默认给你找到对应id的script标签中的内容

template第二个参数，传入数据必须是对象

返回值str为替换之后的动态结构

[jQuery Ajax]: http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
[BaiduTemplate]: http://tangram.baidu.com/BaiduTemplate/
[ArtTemplate]: http://aui.github.io/art-template/zh-cn/
[Link 1]: https://aui.github.io/art-template/
[velocity.js]: https://github.com/shepherdwind/velocity.js/
[Handlebars]: http://handlebarsjs.com/
[Link 2]: http://blog.jobbole.com/56689/