html网页与服务器端实现交换的方法,HTML、前端相关

DOM：定义了访问文档的标准，中立于平台和语言的接口，允许程序和脚本动态的访问、更新文档的内容、结构和样式。

Document对象的方法：

getElementByld:使用元素的id访问HTML元素。

getElementsByTagName(name):通过标签名查找元素。

getElementsByClassName(name):通过类名查找元素。

create*/remove*/append*/replace*/write*:创、删、添、改、写

元素的属性、方法:

innerHTML:该属性提供获取或替换元素内容的接口。

attribute；setAttribute(attribute,value):改变元素值。

补充知识：

编程界面是每个对象的属性和方法。属性是能够获取或设置的值、方法是能够完成的动作。

待补充

AJAX：AJAX非编程语言，核心为XMLHttpRequest。

组合了浏览器内建的XMLHttpRequest对象、JavaScript和HTML DOM

Ajax可以使用XML、纯文本或者JSON文本传输数据。

Ajax允许通过与场景后面的web服务器交换数据来异步更新网页。

工作流程：

1.网页中发生一个事件(页面加载、按钮点击)

2.由javaScript创建XMLHttpRequest对象

所有现代浏览器可以直接通过new XMLHttpRequest()的方法获取到对象

老版本浏览器使用ActiveX对象创建

3.XMLHttpRequest对象向Web服务器发送请求

使用open、send方法.

get比post更简单更快，但post无大小限制且更强大安全。

4.服务器处理该请求

5.服务器将响应发送回网页

readyState属性保留XHR的状态，readyState发生变化时调用

onreadystatechange定义的函数(会触发五次，第四次时若status为200

则响应就绪)

6.由javaScript读取响应

loadDoc()函数创建XHR对象，添加当服务器响应就绪时执行的函数。

7.由javaScript执行正确的动作(比如更新页面)

通常使用document.getElementById("id").innerHTML = 值;

注：值的类型参见HTML的数据类型，表格也可以是一个值，前提是表格已

经做好

XMLHttpRequest对象方法：

abort：取消当前请求

getAllResponseHeaders:从服务器返回头部信息

getResponseHeader:从服务器返回特定头部信息

open(请求类型,文件位置,同/异步,可选的用户名称,可选密码):规定请求

send:将请求发送到服务器，用于Get

send(string):用于Post

setRequestHeader():向要发送的报头添加标签/值对

异步发送，JavaScript不必等待服务器响应，可以在等待服务器响应时执行其它脚本，或者当响应就绪时处理响应

XMLHttpRequest对象属性：

responseText：获取JS字符串形式的返回服务器响应数据

responseXML：获取XML DOM数据形式的服务器响应数据(内建解析器)

补充知识：XML指可扩展标记语言，很像html标记语言。但设计宗旨是传输数据，而不是显示数据(html)。xml的标签需要自行定义(html的标签是预定义好的)，被设计为具有自我描述性。主要用途为把数据从HTML中分离，XML简化数据共享简化数据传输

XMLHttpRequest对象：用于与服务器交互，可以在不刷新页面的情况下请求特定的URL获取数据，更新页面的局部内容。可以用于获取任何类型的数据，支持HTTP以外的协议。

XMLHttpRequest的状态：请求未初始化、服务器连接已建立、请求已接受、正在处理请求、请求已完成且响应已就绪。

现代浏览器不允许跨域的访问，网页以及它试图加载的XML文件，都必须位于相同的服务器上

HTTP头域包括通用头、请求头、响应头和实体头，每个头域由一个域名、冒号和阈值组成。头部的作用独立于信息部分，传递控制信息。

JavaScript通过HTML DOM(文档对象模型)访问，改变HTML文档的所有元素，这也是AJAX实现的重要原因。

注：包括对所有HTML元素或属性进行增删改、改变所有CSS样式、对已有的HTML事件做出反应、创建新的HTML事件。

JSON:属于文本，衍生于JS对象标记语法，存储交换数据的语法。JS与JSON之间可以随时随地进行转换。

"元素名":元素值，

元素值：字符串/数字/布尔/空、数组([])、对象({})

重要函数、方法：

JSON.stringify():将对象转换为JSON

JSON.parse():将JSON转换为JS对象，对衍生自数组的JSON返回JS数组(服务器返回的是数组)

访问：[]、.

注意：日期、函数都只能通过字符串记录，收到后使用reviver参数、eval()函数转换。