Ajax explain

Source of demand

concept

When we type a URL in the browser address bar, or submit content to the server through a web form, we began to interact with the server.

Traditional Web applications interact

1. The user triggers an HTTP request to the server, the server processes it and then returns a new HTML page to the client
2. Whenever the server processes the request submitted by the client, the client can only be idle waiting, and even if only a small interaction, get a simple data only from the server must return a complete HTML page
3. And the client every time a waste of time and bandwidth to re-read the entire page

Web interaction gradual improvement process

1. Prior to 1999, JS can send a request to the server via an intermediate layer Java applet or Flash movies
2. In 1999, Microsoft released IE browser version 5.0, the first time the introduction of new features: Allow JavaScript script sends an HTTP request to the server
3. The core Ajax technology is XMLHttpRequest (referred to as XHR), which is a feature first introduced by Microsoft, its first application in IE5 browser, then gradually evolved into a new version

Client and server

CS and BS

1. The concept: the Two software use
2. C / S: Client / Server
   PC client-server architecture
   ① Features: Among the main server is a database, all business logic and interface are handed over to the client complete
   ② advantages: more security, rich user interface, user experience good
   ③ drawback: each upgrade must be re-installed, for different operating systems development, poor portability
3. B / S: Browser / Server
   browser / server architecture
   ① Features: browser-based application access, the business layer to the server to complete the client only in exchange interface rendering and data
   ② advantages: only server-side development, cross-platform, highly portable
   ③ drawback: security is relatively low, poor user experience

Web Resources

1. What is the Web?
   WEB page, it is used to represent a network host access outside resources for reference.
2. Web resource classification?
   ① static Web resources: refers to data in a web page for people to browse is always constant
   ② dynamic Web Resources: refers to the data for people to browse the web page is generated by the program, visit different points in time to see the content of each web page is not the same
3. Web resources stored?
   ① all web resources on a web server which
   a software ② web server that can be used for external access to web resources
   ③ web resources into the specified directory which you can access through the browser among the corresponding port
4. URL address
   protocol: // host address: port number / address resource
   http://www.itlike.com:80/index.html
   

Resource Access Process

1. The client
   browser, Android program, iOS program, small micro-channel program

2. Server
   php server, Tomcat server, nodeJS server

3. Question: When we visit a URL in the browser which, why you can see a page?
   The answer:
   ① a corresponding URL is actually an IP address

   1. A corresponding IP address of a computer
   2. To find the corresponding IP address of the computer by
   3. Computer which has installed a web server, find the corresponding server with port number

   ② find the corresponding server, the server returns the page to your
   ③ such a process is http request process

4. Structure flowchart BS
   

5. Request and response
   ① Request: The client requests sent to the server
   ② Response: The server you want to send the data to the client
   ③ requests and responses have a certain format

   1. A good agreement with the client what format the data to the server
   2. A good agreement server in what format the data to the client
   3. The convention is to use the HTTP protocol

HTTP protocol

What is the protocol

约束双方规范的一个准则

什么是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案例实操