Ajax实现搜索框提示功能

function ajax(options){ //定义默认 var defaults ={ type:'get', url:'', data:{}, Headers:{'Content-Type': 'application/x-www-form-urlencoded'}, success:function(){}, error:function(){} }; //用options中的对象覆盖defaults中对象 Object.assign(defaults,options); //创建 var xhr= new XMLHttpRequest(); //拼接请求参数变量 var params=''; //循环用户传递进来的对象格式参数 for(var attr in defaults.data){ //将参数转换成字符串格式 params+= attr +'='+ defaults.data[attr] +'&'; } //字符串截取，将最后的&截取掉 params= params.substr(0,params.length -1); //判断请求方式 if(defaults.type=='get'){ defaults.url=defaults.url +'?'+ params; } //配置 xhr.open(defaults.type,defaults.url); //发送请求 if(defaults.type=='post'){ //用户期望的向服务端传递的请求参数类型 var contentType=defaults.Headers['Content-Type']; //post请求时必须设置的 xhr.setRequestHeader('Content-Type',contentType); //判断请求参数类型 if(contentType=='application/json'){ xhr.send(JSON.stringify(defaults.data)); }else{ xhr.send(JSON.stringify(params)); } }else{ xhr.send(); } //监听onload事件,当接收完响应数据后触发 xhr.onload=function(){ //xhr.getResponseHeader() //获取响应头部数据 var contentType=xhr.getResponseHeader('Content-Type'); //服务端返回的数据 var responseText=xhr.responseText; if(contentType.includes('application/json')){ //把JSON字符串转换为JSON 对象 responseText = JSON.parse(responseText); } //对http状态码判断，判断是否等于200 if(xhr.status==200){ //调用处理成功情况的函数 defaults.success(responseText,xhr); }else{ //调用处理失败的情况函数 defaults.error(responseText,xhr); } } }

/**** server.js ****/ // 一个简单的后端路由 //1.引入express框架 const express=require('express'); const fs=require('fs'); //2.引入路径处理模块 const path=require('path'); const bodyParser=require('body-parser');//post //3.创建web服务器 const app=express(); //post //extended:返回的对象是一个键值对，当extended为false的时候，键值对中的值就为'String'或'Array'形式，为true的时候，则可为任何数据类型。 //解析urlencoded app.use(bodyParser.urlencoded({extended: false})); //解析json app.use(bodyParser.json()); //4.静态资源访问服务器功能 app.use(express.static(path.join(__dirname,'public'))); //5.配置路由 request 请求   response 响应,回应 //get路由 ，对应12.html app.get('/searchAutoPrompt',(request,response)=>{ //响应 const key = request.query.key; var result=["无匹配内容"]; if (key == "合肥") { result=['合肥蜀山区','合肥瑶海区','合肥肥西','合肥肥东','合肥新站区']; response.send(result) } else if(key == "阜阳") { result=['阜阳市阜南县','阜阳卷膜','阜阳火车站','阜阳格拉条']; response.send(result) }else { response.send(result) } }); //6.监听端口,进行回调 app.listen(3000,(err)=>{ // 函数体 if(!err) { console.log('测试ajax请求的服务器开启成功了!'); console.log('正在监听3000端口...........'); } });