ajax

今天刚刚学习了ajax用普通按钮提交内容，局部刷新（如form表单一样），所以再此梳理下代码，也做下笔记以免搞忘。

一、AJAX开发步骤:

1、客户端事件发生，调用JavaScript函数编写的事件处理程序

2、在事件处理程序中创建XMLHttpRequest对象

3、配置XMLHttpRequest对象

4、XMLHttpRequest对象发送一个异步HTTP请求到服务器

5、服务器程序接收请求，处理请求，返回相应

6、XMLHttpRequest对象调用callback()函数并处理结果

7、更新

源代码：

html:

<input type="text" name="name" id="name"/>

<span id="mes"></span>
<input type="button" class="search" οnclick="queryUser"/> 

javascript:

//一、创建ajax对象
function queryUser（）{
var http;
if(window.XMLHttpRequest){
   http = new XMLHttpRequest();//DOM
}else{
    http = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器
}
//二、配置ajax对象（提交对象、请求URL路径、同步或异步）
//获取对象
http.open("post","checkUser.do?name="+name,true);//true表异步，false 表同步
http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//三、配置回调函数     请求得到响应后执行的方法
http.onreadystatechange = function(){
  if(http.readyState == 4&& http.status == 200){
        console.log("回调函数");
        //console.log(http.readyState)//对象状态<pre name="code" class="html">       //console.log(http.status)//状态码 200 成功<pre name="code" class="html">        //console.log(http.responseText)//服务器进程返回数据的文本
         //向文本添加内容，从数据库查询出来的
        var Text = document.getElementById("mes");<pre name="code" class="html">        var data = JSON.parse(http.responseText);//转换json数据
        for(var i=0;i<data.length;i++){
         //console.log(data[i].name);获取数据库表中name列
          Text.innerHTML = Text.innerHTML + data[i].name;//赋予对象内容
}<span style="font-family: Arial, Helvetica, sans-serif;">       </span>
 }
}
//四、发送
<pre name="code" class="html">var name = document.getElementById("name").value;//获取输入文本的值
http.send("name="+name);//post方法}

配置nodejs；引用了express模板

//一、加载express资源
var myexpress = require（"./server/node_modules/express"）;
var user = require("./server/dao/userDao.js");//引入外部js
//二、生成服务器对象
var app = myexpress();
//三、设置端口号
app.set("port",8888);
//四、给服务器设置端口
app.listen(app.get("port") ,function(){
   console.log("端口启动成功，端口号为："+app.get("port"));
})
//五、配置app
app.configure(function(){
   //日志模板
   app.use(myexpress.logger("dev"));
   //关于表单post方法配置
   app.use(myexpress.bodyParser());
   app.use(myexpress.methodOverride());//将其他非get方法转化为post方法
   app.use(app.router);
   app.use(myexpress.static(__dirname+"/client"));
   //错误日志
   app.usr(myexpress.errorHandler());
})<pre name="code" class="html">app.post("/queryUser.do",user.queryUser);

配置userDao，引用mysql模板

var mysql = require("./../mode_modules/mysql");

exports.queryUser = function(req,resp){
  console.log("执行查询");
   var name = req.body.name;
   var sql = "select * from student where 1=1 ";
   var array = [];
   if(name == null||name == undefined || name ==""）{
    name = null;
    array.push(name);
}else{
    sql = "and name like ?";
    array.push("%"+name+"%");
}<pre name="code" class="html">//1、创建连接
var conn = mysql.createConnection({
  host:"localhost",
  user:"root",
  password :"1314",
  port:"3306",
  database:"text"
});
//2、打开连接
conn.connect();
//3、数据库操作<pre name="code" class="html">var sql = "select * from student where name like ?";
 var arry = [];
 conn.query(sql,array,function(err,data){
    console.log(ere);
    console.log(data);
    //返回数据给前台
    resp.send(data);
    resp.end();
})
conn.end();
}