アヤックス説明します

需要の源

コンセプト

私たちは、ブラウザのアドレスバーにURLを入力するか、Webフォームを介してサーバにコンテンツを送信すると、私たちは、サーバーとの対話を始めました。

従来のWebアプリケーションの相互作用

1. ユーザーは、サーバーがそれを処理し、クライアントに新しいHTMLページを返し、サーバーへのHTTPリクエストをトリガー
2. サーバは、クライアントが提出した要求を処理するたびに、クライアントはアイドル待機することができ、さらにはわずかな相互作用すれば、完全なHTMLページを返さなければならない唯一のサーバーからの単純なデータを取得します
3. そして、クライアントたびに時間の無駄と帯域幅ページ全体を再読み込み

ウェブインタラクション漸進的な改善プロセス

1. 1999年以前に、JSは、中間層のJavaアプレットやFlashムービーを介してサーバにリクエストを送信することができます
2. 許可JavaScriptのスクリプトがサーバにHTTPリクエストを送信します。1999年、Microsoftは、新機能の導入が初めてのIEブラウザのバージョン5.0をリリース
3. コアAjax技術は徐々に新しいバージョンへと進化し、最初にMicrosoftによって導入された機能であるのXMLHttpRequest（XHRとも呼ばれる）、IE5ブラウザでその最初のアプリケーションであります

クライアントとサーバー

CSやBS

1. コンセプト：二つのソフトウェアの使用
2. C / S：クライアント/サーバー
   PCクライアントサーバアーキテクチャ
   ①特徴：メインサーバがデータベースであるなかで、すべてのビジネス・ロジックおよびインターフェイスは、クライアントを完全に引き渡され
   、よりセキュリティ、リッチなユーザーインターフェース、ユーザーエクスペリエンス：②利点良い
   ③欠点：各アップグレードは再インストールする必要があり、異なるオペレーティングシステムの開発のために、貧しいポータビリティ
3. B / S：ブラウザ/サーバ
   、ブラウザ/サーバアーキテクチャ
   ①特徴：サーバーへのブラウザベースのアプリケーションへのアクセス、ビジネス層のみをレンダリングするインターフェース交換とデータでクライアントを完了するために
   ②の利点：のみ、サーバー側の開発、クロスプラットフォームで、携帯性に優れ
   ③欠点：セキュリティが貧弱なユーザーエクスペリエンス、比較的低いです

Webリソース

1. ウェブとは何ですか？
   WEBページ、参照するためのリソース外部ネットワークのホストアクセスを表すために使用されます。
2. Webリソースの分類？
   ①静的なウェブリソース：ブラウズする人のためのWebページ内のデータを参照し、常に一定である
   動的なWebリソース②：Webページを閲覧する人のためのデータを参照し、プログラムによって生成され、各ウェブページのコンテンツを見るために、時間の異なる点を訪問することはできません同じ
3. Webリソースが格納されていますか？
   ①Webサーバ上のすべてのWebリソース
   Webリソースへの外部からのアクセスのために使用することができるソフトウェア②Webサーバ
   あなたが対応するポート間でブラウザを介してアクセスすることができ、指定したディレクトリに③Webリソースは
4. URLアドレス
   、プロトコル：//ホストアドレス：ポート番号/アドレスリソース
   http://www.itlike.com:80/index.html
   

リソースアクセスプロセス

1. クライアントの
   ブラウザ、Androidのプログラム、iOSのプログラム、小さなマイクロチャネルプログラム

2. サーバーの
   PHPサーバー、Tomcatサーバー、サーバーnodeJS

3. 質問：私たちはあなたがページを見ることができる理由を、ブラウザでURLにアクセスしてください！
   答え：
   ①対応するURLは、実際にはIPアドレスです

   1. コンピュータの対応するIPアドレス
   2. することにより、コンピュータの対応するIPアドレスを確認するには
   3. Webサーバーをインストールしたコンピュータでは、ポート番号に対応するサーバーを見つけます

   ②対応するサーバを見つけ、サーバはあなたにページを返す
   ③こうしたAプロセスのhttpリクエストプロセスであります

4. 構造フローチャートBS
   

5. 要求と応答は、
   ①要求：クライアント要求がサーバーに送信された
   ②応答：あなたはクライアントにデータを送信するサーバ
   ③要求と応答は、特定の形式を持っています

   1. サーバにどのような形式のデータクライアントとの良好な一致
   2. クライアントにデータをフォーマットするものによく一致サーバ
   3. 大会には、HTTPプロトコルを使用することです

HTTPプロトコル

プロトコルとは何ですか

约束双方规范的一个准则

什么是HTTP协议

1. HTTP，超文本传输协议（HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。
2. 所有的WWW文件都必须遵守这个标准。
3. 设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。

请求的发送方式

1. 通过浏览器的地址栏
2. 通过html当中的form表单
3. 通过a链接的href
4. src属性

HTTP协议的组成

1. http协议组成：请求 & 响应
2. 请求与响应都是成对存在的
   
   ① 当在浏览器中输入网址访问某个网站时
   ② 你的浏览器会将你的请求封装成一个Http请求发送给服务器站点
   ③ 服务器接收到请求后会组织响应数据封装成一个Http响应返回给浏览器
   总结：没有请求就没有响应

HTTP请求：发送请求

请求的组成：

1. 请求行
   1）请求方式：POST、GET
   2）请求的资源：/node/form.html?username=myxq&pwd=1234
   3）协议版本：HTTP/1.1
   HTTP/1.0，发送请求，创建一次连接，获得一个web资源，连接断开。
   HTTP/1.1，发送请求，创建一次连接，获得多个web资源，保持连接。
2. 请求头
   1）请求头是客户端发送给服务器端的一些信息，使用键值对表示key：value
   2）使用键值对表示key：value
   3）常见的请求头
   
3. 请求体
   1）当请求方式是post的时，请求体会有请求的参数
   比如: username=zhangsan&password=123
   2）如果请求方式为get，那么请求参数不会出现在请求体中，会拼接在url地址后面
   比如: http://localhost:63342/day2/01-…2.html?username=zhangsan&password=123
4. 示意图
   

HTTP响应

1. 响应行
   1）Http协议
   2）状态码
   200 ：请求成功
   302 ：请求重定向
   304 ：请求资源没有改变，访问本地缓存。
   404 ：请求资源不存在。通常是用户路径编写错误，也可能是服务器资源已删除。
   500 ：服务器内部错误。通常程序抛异常
   3）其它状态码

   1. 成功
      
   2. 重定向
      
   3. 客户方错误
      
   4. 服务器错误
      

2. 响应头
   1）服务器端将信息以键值对的形式返回给客户端
   2）常见响应头

   1. Location：指定响应的路径，需要与状态码302配合使用，完成跳转
   2. Content-Type：响应正文的类型（MIME类型）
   3. Content-Disposition：通过浏览器以下载方式解析正文
   4. Set-Cookie：服务器向浏览器写入cookie
   5. Content-Encoding：服务器使用的压缩格式
   6. Content-length：响应正文的长度
   7. Refresh：定时刷新
   8. Server：服务器名称，默认值：Apache-Coyote/1.1。可以通过conf/server.xml配置进行修改
   9. Last-Modified：服务器通知浏览器，文件的最后修改时间

   3）自动的把服务器端的信息传给客户端

3. 响应体
   1）响应体是服务器回写给客户端的页面正文
   2）浏览器将正文加载到内存
   3）然后解析渲染显示页面内容

4. 图示
   

请求方式

1. 8种请求类型
   1. OPTIONS：返回服务器针对特定资源所支持的HTTP请求方法，也可以利用向web服务器发送‘*’的请求来测试服务器的功能性
   2. HEAD： 请求指定的页面信息，并返回头部信息
   3. GET： 请求指定的页面信息，并返回实体主体
   4. POST：向指定资源提交数据进行处理请求
   5. PUT：向指定资源位置上传其最新内容
   6. DELETE：请求服务器删除Request-URL所标识的资源
   7. TRACE：回显服务器收到的请求，主要用于测试或诊断
   8. CONNECT：HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器
2. 常用两种请求
   ① GET
   1）GET 方法向页面请求发送参数
   2）地址和参数信息中间用 ? 字符分隔
   3）查询字符串会显示在地址栏的URL中，不安全，请不要使用GET请求提交敏感数据
   4）GET 方法有大小限制：请求字符串中最多只能有 1024 个字符
   5）GET请求能够被缓存
   6）GET请求会保存在浏览器的浏览记录中
   7）可以添加书签
   8）编码类型为application/x-www-form-urlencoded
   9）只允许ASCII字符类型，不能用二进制流
   10）点击刷新时，不会有反应
   11）GET请求主要用以获取数据
   12）测试数据：http://123.207.32.32:8000/home/data?type=sell&page=1
   13）测试网站：httpbin.org
   ② POST
   1）POST 方法向页面请求发送参数
   2）使用POST方法时，查询字符串在POST信息中单独存在，和HTTP请求一起发送到服务器
   3）编码类型为：application/x-www-form-urlencoded or multipart/form-data. 请为二进制数据使用multipart编码
   4）没有历史记录
   5）参数类型没有限制，可以是字符串也可以是二进制流
   6）数据不会显示在地址栏中，也不会缓存下来或保存在浏览记录中，所以看POST求情比GET请求安全，但也不是最安全的方式。如需要传送敏感数据，请使用加密方式传输
   7）查询字符串不会显示在地址栏中
   8）Post传输的数据量大，可以达到2M，而Get方法由于受到URL长度限制,只能传递大约1024字节
   9）Post就是为了将数据传送到服务器段，Get就是为了从服务器段取得数据

Ajax

基本概念

1. AJAX是 ”Asynchronous JavaScript And XML” 的缩写（即：异步的JavaScript和XML）
2. AJAX是一种实现无页面刷新获取服务器数据的混合技术

XML是什么

1. 概念
   1）XML是“Extensible Markup Language”的缩写（即：可拓展标记语言）
   2）是一种特征类似HTML，用来描述数据是什么，并承载数据的标记语言
   3）目前，我们只要知道它是一种用来承载数据的语言就足够了
2. XML和JSON的区别
   1）JSON仅仅是一种数据格式，在JSON发明之前，人们大量使用XML作为数据传输的载体
   2）后来，JSON这种类似于字符串对象的轻量级的数据格式越来越受到开发者青睐，慢慢变成了AJAX技术的标准数据格式
   3）“AJAX”可以改个名字，叫做“AJAJ”（开玩笑）

无页面刷新

1. 互联网最主要的功能在于“资源交换”
2. 通常将获取资源的一方称为客户端（主要的工具是浏览器），而将派发资源的一方称为服务端（又称为“服务器”）
3. AJAX技术出现之前
   客户端发出请求 —> 服务端接收请求 —> 服务器端返回相应HTML文档 —> 客户端页面刷新 —> 客户端加载新的HTML文档
4. 新的需求：有没有办法在页面数据变动时，只向服务器请求新的数据，并且在阻止页面刷新的情况下，动态的替换页面中展示的数据呢？
   答案：AJAX。开发者将拥有更高的自由度在“数据”层面而非“资源”层面构建网站和Web应用

混合技术

1. 基本概念
   AJAX技术并不只是操作XMLHttpRequest对象发起异步请求
   而是为了实现 “无页面刷新的资源获取” 的一系列技术的统称
2. 混合技术包括
   1）JavaScript：用来在获取数据后，通过操作DOM或其他方式达成页面内容更新
   2）客户端（即浏览器）提供的实现异步服务器通信的XMLHttpRequest对象
   3）服务器端允许浏览器向其发起AJAX请求的相关设置

图示

配置服务器

1. 安装Node
   1）下载对应系统的软件
   2）一步步安装至结束
   3）测试是否安装成功
   node -v、npm -v
2. 安装express
   1）执行 npm install -g express
   2）执行 npm install -g express-generator
   必须安装这个,不然创建express项目的时候会提示express命令没有找到
   3）执行 express -V
   4）执行express myServer --view=ejs

使用Ajax

1. 创建 XMLHttpRequest 对象
   1）XMLHttpRequest 对象
   所有现代浏览器均支持 XMLHttpRequest 对象
   XMLHttpRequest 用于在客户端与服务器交换数据
   通过该对象可以在不重新加载整个网页的情况下，对网页的某部分进行更新
   2）创建 XMLHttpRequest 对象
   var xhr=new XMLHttpRequest();

2. 完整Ajax流程
   1）创建XMLHttpRequest对象

   var xhr = new XMLHttpRequest();
   

   2）准备发送

    xhr.open('get', './01check.js?username='+uname+'&password='+pw,true);
   

   
   3）执行发送动作

    xhr.send(null);
   

   
   4）指定回调函数
   1）onreadystatechange 事件
   当请求被发送到服务器时，我们需要执行一些基于响应的任务
   每当 readyState 改变时，就会触发 onreadystatechange 事件
   2）readyState
   
   当 readyState 等于 4 且状态为 200 时，表示响应已就绪

   xhr.onreadystatechange = function(){
       if(xhr.readyState === 4){
           if(xhr.status === 200){
               var data = xhr.responseText;
               var info = document.getElementById('info');
               if(data == '1'){
                   info.innerHTML = '登录成功';
               }else if(data == '2'){
                   info.innerHTML = '登录失败';
               }
           }
       }
   }
   

3. Ajax案例实操