Ajax基础教程

Ajax的实现步骤

1.创建Ajax对象

var xhr = new XMLHttpRequest();

2.告诉Ajax请求地址以及请求方式

xhr.open('get','http://www.example.com');

3.发送请求

xhr.send();

4.获取服务器端给与客户端的相应数据

xhr.onload = function () {
	console.log (xhr.responseText);
}

5.example

<script type=" text/javascript">
// 1.创建ajax对象
var xhr = new XMLHttpRequest();
//2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
//1)请求方式2)请求地址
xhr.open('get','http://localhost:3000/first');
// 3.发送请求
xhr.send();
//4.获取服务器端响应到客户端的数据
xhr.onload = function (){
	console.log(xhr.responseText);
}
</script>

服务器端响应

框架

//引入express框架
const express = require('express');
//路径处理模块
const path = require('path');
//创建web服务器
const app = express();
//静态资源访问服务功能
app.use(express.static(path.join(__dirname,'public')));
//监听端口
app.listen(3000);
//控制台提示输出
console.log('服务器启动成功');

处理服务器端返回的JSON数据

//引入express框架
const express = require('express');
//路径处理模块
const path = require('path');
//创建web服务器
const app = express();
//静态资源访问服务功能
app.use(express.static(path.join(__dirname,'public')));
//对应01html文件
app.get('/first',(req,res) => {
	res.send('Hel1o, Ajax');
});
app.get('/responseData',(req,res) => {
	res.send({"name":"zs"});
});
//监听端口
app.listen(3000);
//控制台提示输出
console.log('服务器启动成功');

xhr.onload = function (){
    //此时控制台输出的是字符串类型（而不是对象类型）
	//console.log(xhr.responseText);
    //需要将JSON字符串转换为JSON对象
    var responseText=JSON.parse(xhr.responseText )
	console.log(responseText)  //输出为对象类型
}

请求参数传递

GET请求方式

xhr.open('get','http://www.example.com?name 		=zhangsan&age=20");

• 具体实现

//为按钮添加点击事件
btn.onclick = function () {
    //创建ajax对象
    var xhr = new XMLHttpRequest();
    //获取用户在文本框中输入的值
    var nameValue = username.value;
    var ageValue = age.value;
    //拼接请求参数
    var params='username='+ nameValue +'&age='+ ageValue;
    //配置ajax对象
    xhr.open('get','http://localhost:3000/get?'
              +params );
    //发送请求
    xhr.send( );
    //获取服务器端响应的数据
    xhr.onload = function () { 
    	console.log( xhr.responseText)
    }
}

POST请求方式

xhr.setRequestHeader('Content-Type",'application/x-www-form-urlencoded')
xhr.send('name=zhangsan&age=20');

• 具体实现

//为按钮添加点击事件
btn.onclick = function () {
    //创建ajax对象
    var xhr = new XMLHttpRequest();
    //获取用户在文本框中输入的值
    var nameValue = username.value;
    var ageValue = age.value;
    //拼接请求参数
    var params='username='+ nameValue +'&age='+ ageValue;
    //配置ajax对象
    xhr.open('post','http://localhost:3000/post');
    //设置请求参数格式的类型（POST请求必须要设置）
    xhr.setRequestHeader('Content-Type",'application/x-www-form-urlencoded');
    //发送请求
    xhr.send(params);
    //获取服务器端响应的数据
    xhr.onload = function () { 
    	console.log(xhr.responseText)
    }
}

请求参数的格式

JSON请求只能在POST中使用
在请求头中指定Content-Type属性的值是application/json
告诉服务器端当前请求参数的格式是json

• 具体实现

  <script type="text/javascript">
  // 1.创建ajax对象
  var xhr = new XMLHttpRequest();
  // 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
  // 1)请求方式2)请求地址
  xhr.open('post','http://localhost:3000/json');
  //通过请求头告诉服务器端客户端向服务器端传递的请求参数的格式是什么
  xhr.setRequestHeader('Content-Type','
  application/json');
  //3.发送请求
  // JSON.stringify() 将json对象转换为json字符串
  xhr.send(JSON.stringify({name:'lisi',age:50}));
  //4.获取服务器端响应到客户端的数据
  xhr.onload = function (){
  	console.log(xhr.responseText)
  }
  </script>