js如何定义一个字符串长度第一关： HTML(3)、CSS((7)

提示：语义上，此示例应该使用POST请求

练习内容：

(1)使用XHR对象发起异步的HTTP请求——成绩录入系统

<h1>成绩录入系统</h1>

学生姓名： <input>

语文成绩： <input>

数学成绩： <input>

<input type="button" value="保存成绩">

要求：点击“保存成绩”按钮，发起异步HTTP请求，把数据提交给服务器端的PHP页面，INSERT到MySQL，返回‘succ‘或‘err‘提示文字。客户端弹出一个alert("保存成功/失败")。用户点击确定后，清空输入框内容，继续录入下一个学生成绩。

实现步骤：

(1)编写SQL：创建-tarena，包含表-score( sid、stuName、chinese、math )；插入三行测试数据，查询所有记录行。

(2)编写PHP：创建score_add.php，接收客户端提交的stuName / chinese / math数据，执行INSERT，把数据插入到，返回succ或err

(3)编写HTML：创建score_add.html，显示三个输入框及提交按钮，一点击发起异步请求，将数据提交给服务器端PHP页面

要求：

先用GET方式提交数据！

再用POST方式提交数据！

复习：

AJAX：异步JS和XML，涉及到HTML、CSS、JS、DOM、HTTP、XML、JSON等。目标：无刷新无提交情况下实现页面内容局部更新，提高浏览体验。

使用XHR发起异步请求步骤：

(1)创建XHR

(2)XHR的状态改变 0 1 2 3 4

(3)连接到Web服务器

(4)发送请求消息

练习：dangdang的后台书籍录入系统——不跳转

(1)编写SQL：dangdang.sql，表book( bid, bname, price, pic )，试着插入几行记录

(2)编写PHP：book_add.php，接收客户端提交的bname, price, pic，插入到中，成功则返回succ，失败则返回err。记得同步请求测试一下

(3)编写HTML：book_add.html，没有表单，只有几个输入框，一个button按钮，单击后收集用户的输入，发起异步请求，提交给服务器

今日目标：

(1)复习XHR发起两种请求

(2)学习XHR接收五种响应 —— 重点

1.使用XHR发起两种请求之一——GET

//1 var xhr = new XMLHttpRequest();

//2 xhr.onreadystatechange = function(){}

//3 xhr.open(‘GET‘, ‘x.php?k=v&k=v‘, true)

//4 xhr.send(null);

2.使用XHR发起两种请求之二——POST

//1 var xhr = new XMLHttpRequest();

//2 xhr.onreadystatechange = function(){}

//3 xhr.open(‘POST‘, ‘x.php‘, true)

//3.5 xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘)

//4 xhr.send(‘k=v&k=v‘)

3.使用XHR接收五种响应——text/plain

服务器端：

header(‘Content-Type: text/plain‘);

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-79238-7.html