JavaScript Ajax_js ajax-优快云博客

web基础知识

1、web服务器

在这里插入图片描述

在Web服务器中，请求资源又分为静态资源和动态资源。

静态资源的特点：只要服务器没有修改这些文件，客户端每次请求到的都是同样的内容。

动态资源的特点：内容可以动态发生变化，每次请求都需要计算处理。

服务器端web开发常用技术有：PHP、ASP.NET、Java、node等。

什么是服务器？

其实就是一台高性能电脑。

2、HTTP协议

HTTP（HyperText Transfer Protocol）全称为超文本传输协议。于规范客户端和服务器之间以指定的格式进行数据交互。

HTTP是一种基于“请求”和“响应”的协议。

当客户端与服务器建立连接后：

客户端（浏览器）向服务器端发送一个请求，这个请求称为HTTP请求。
服务器接收到请求后做出响应，称为HTTP响应。

web服务器搭建

前后端交互（表单交互）
在这里插入图片描述

前后端交互（URL参数交互）

在这里插入图片描述

Ajax

在这里插入图片描述

数据交互格式

1、XML

XML：eXtensible Markup Language，可扩展标记语言。

与HTML都是标签语言，XML主要用于描述和存储数据，可以自定义标签。

<?xml version="1.0" encoding="utf-8" ?>//xml声明
  <booklist>//开始 标签
    <book>
  <name>三国演义</name>
  <author>罗贯中</author>
  </book>
  <book>
  <name>水浒传</name>
  <author>施耐庵</author>
  </book>
  </booklist>//结束标签

当服务器返回的是一个XML格式的数据时，利用Ajax对象的responseXML属性即可对XML数据进行处理。

2、Json
JSON：是一种轻量级的数据交换格式。

特点：采用完全独立于语言的文本格式，这使得JSON更易于程序的解析和处理。

与XML对比：使用JSON对象访问属性的方式获取数据更加方便，在JavaScript中可以轻松地在JSON字符串与对象之间转换。

JavaScript Ajax

1、基本概念

AJAX = Asynchronous JavaScript And XML.（异步的 JavaScript 和 XML）

2、优点

局部刷新
异步

理解：
在JavaScript中，同步代码会按照编写顺序顺序执行，而异步代码（如网络请求、定时器等）会在后台执行，不会阻塞其他代码。当异步操作完成时，它会通知JavaScript引擎，然后JavaScript引擎会执行回调函数。

同步：一次只能干一件事
异步：一次能干多件事

3、Ajax使用和注意问题

使用用法
ajax（url,成功回调函数，失败时回调函数）

回调函数：只管定义，什么时候调用不要管。
访问形式：http://localhost/xxxxxxx.html

Ajax需要注意的问题

(1)缓存：同一地址只请求一次

方法 ajax('a.txt?t='+Math.random(),function(){}）

(2)从服务器返回的都是字符串

12+5=17 (number)
{“a”:12}
解决方法json.prase()

本身存在兼容性问题（IE8)
解决方法

<meta http-equiv="X-UA-Compatible" content="ie=edge">

比如：JSON.parse(data)+5；

（3）乱码

txt文件使用utf-8
统一编码：UTF-8

（4）ajax请求服务器文件与后缀名无关。

Ajax与服务器的交互过程

（1）创建一个Ajax对象

var  oAjax;
if(window.XMLHttpRequest){                
 oAjax=new  XMLHttpRequest();            
}else{                
  oAjax = new  XMLHttpRequest('Microsoft.XMLHTTP');           
 }

（2）创建一个连接

两种方式：get、post

oAjax.open('GET','a.txt',true)

（3）发送请求

oAjax.send()

（4）接收

oAjax.onreadystatechange=function(){                
//判断通讯状态                
 if(oAjax.readyState==4){                    
//http状态                    
  if(oAjax.status==200||oAjax.status==304){                        //服务器返回文本形式                          
    alert(oAjax.responseText);                    
  }                
 }                          
};

判断通讯状态

0 初始化 XMLHttpRequest对象初始
1 载入完成，开始发送请求
2 发生请求完成
3 开始解析、读取服务器的响应
4 完成，对象读取服务器相应结束

http状码

100（消息响应）
2xx(200)_成功
3xx重定义

304 not motified 缓存
4xx客户端错误

404 no found 未找到文件
5xx服务器端错误

500 服务器内部错误很可能为后台代码写错
503 服务器问题

用Ajax使用登录注册

Ajax,js从服务器获取数据

表单三要素：

（1）action（提交地址）

www.baidu.com(本都）
（2）http:(网路）

method（提交方法：默认为get、post）
get(明文、不安全、url可见 32k 有缓存）
post（密文、相对安全、 url不可见、1G、没有缓存）
（3）name(提交字段名）

form提交
刷新整个页面，用户体验不好，浪费带宽
不能从服务器拿点数据回来

接口API（其实就是一个地址进行数据操作）
method：get
参数
返回值