javascript笔记8-表单脚本、JSON、AJAX

 

通过表单提交，很方便的可以从界面把参数传递给后台。

如果前后台我们有大量数据需要交互，JSON方便我们传递和读取。

如果需要更新一个界面的某一部分数据，并不想刷新界面，就要用到Ajax。

1. 表单脚本

1.1. 概述

在HTML中，表单是由<form>元素来表示的，在JavaScript中，表单对应的是HTMLFormElement类型，它继承了HTMLElement，因而与其他HTML元素具有相同的默认属性。其他特性和方法：

action：接收请求的URL;等价于HTML的action属性。

method：发送HTTP的请求类型（get、post），等价于HTM来的method属性。

name：表单名称；等价于HTML的name属性。

reset();所有表单重置为默认值；

submit():提交表单。

target：发送请求与接收相应的窗口名称；等价于HTML的target属性。

1.2. 提交表单

• 使用<input>或<button>，把type属性设置为”submit”,就可以定义提交按钮。（reset属性用来重置）如：

<input type=”submit” value=”balala”>

<button type=”submit”>balala</button>

<input type=”image” src=”graphic.gif”>

• 在javascript中，提交表单使用submit()方法（reset()方法用来重置），表单无需包含提交按钮：如：

var form=document.getElementById(“myForm”);

form.submit();

• 为防止重复提交，往往需要在第一次提交表单后就禁用提交按钮，或者利用onsubmit事件处理程序取消后续的表单提交操作。
• 每个表单都有elements属性，该属性是表单中所有元素的集合。该集合是个有序列表，包含着表单中的所有字段（<input>、<textarea>、<button>等），可以按照位置和name属性来访问。如果多个表单控件都使用一个name，那么就返回以name命名的一个NodeList。
•  <input>、<button>等表单元素共有的属性如下：

　　　　disabled、name、readOnly、type（字段类型，如checkbox、radio）、value(被提交给服务器的值)。

• 表单字段的大部分都有type属性。<input>元素的type属性在html中定义，其他元素的type属性值如下：

 

• 每个表单字段都有两个方法：focus()（聚焦）、blur()（移焦）。
• 表单字段都支持的事件：blur、change、focus。
• 通常，可以使用focus和blur来向用户给出视觉提示，change常用于验证用户在字段中输入的数据。

1.3. 文本框脚本

a) 两种：<input>,<textarea>。

b) <input>的type设置为”text”。size属性可设置能够显示的字符数，maxlength指定文本框可以接受的最大字符数。

c) <textarea>呈现为多行文本框。rows、cols设置文本框大小。

d) <textarea>初始值必须放在<textarea></textarea>之间，且不能指定最大字符数。

e) 调用select()方法可以将焦点放到文本框上。

1.4. 表单序列化

a) 浏览器发送数据到服务器的步骤：

2. JSON（JavaScript Object Notation，JavaScript对象表示法）

并不是只有JavaScript使用JSON，JSON只是一种数据格式。

2.1  JSON三种数据格式

简单值、对象、数组。

a) 简单值：5，“Hello World！”等。JSON字符串必须使用双引号，不能用单引号。

b) 对象：{“name”:”某某某”，“age”：29}，JSON没有申明变量，末尾没有分号，对象属性必须加双引号。属性值可以是复杂类型：

 

c) 数组：[25,”hi”,true]。把数组和对象结合起来，可以构成更复杂的数据集合。

2.2. 解析和序列化

a) 可以把JSON数据解析为有用的JavaScript对象。

b) eval()函数可以解析、解释并返回JavaScript对象和数组。

c) JSON对象有两个方法：

1. JSON.stringify（）：把JavaScript对象序列化为Json字符串；
2. JSON.parse（）：把JSON字符串解析为原生JavaScript值。
3. 有时候JSON.stringify()返回的字符串还要作处理，这时，可以给JSON对象定义toJSON()方法，返回自身的JSON格式。(相当于覆盖toJSON(),类似于Java的覆盖toString();
4. JSON.parse的第二个参数是个函数：

 

3. Ajax（Asynchronous JavaScript+XML）

3.1.  概述

a)  Ajax技术的核心是XMLHttpRequest对象，能够向服务器请求额外的数据而无需重新刷新界面。

b)  使用xhr.open（）发送请求的三个参数：请求类型（get、post），请求URL，是否异步。调用open（）是启动一个请求以备发送，再调用send()正式发送。

3.2. Xhr的属性说明

发送请求收到响应后，响应数据会自动填充xhr的各个属性：

a)  responseText：作为响应主体被返回的文本。

b)  responseXML:如果响应的内容类型为“text/xml”或“application/xml”,这个属性会保存响应数据的XML DOM文档。

c)  status：响应的HTTP状态。

d)  statusText：HTTP状态的说明。

3.3. readyState属性

异步请求中，可以检测XHR对象的readyState属性（请求/响应过程的当前活动阶段）

0：未初始化（尚未调用open()）.

1:启动（已经调用open(),尚未调用send()）.

2:发送（已经调用send(),但未收到响应）。

3：接收（已经收到部分响应数据）

4：完成：已经收到全部响应数据，可以在客户端使用。

3.4.    XHR举例：

  

var xhr = createXHR();       

xhr.open("get", "example.txt", false);

xhr.send(null);

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){

         alert(xhr.statusText);

         alert(xhr.responseText);

 } else {

        alert("Request was unsuccessful: " + xhr.status);

 }

3.5.    其他说明：

1. 每个HTTP请求和响应都会带有相应的头部信息。
2. GET请求用于向服务器查询某些信息，必要时将查询字符串参数追加到URL末尾。
3. POST请求用于向服务器发送应该被保存的数据，把数据作为请求的主体提交。