1. ajax的五步写法
<!DOCTYPE html>
<html>
<head lang="en">
<Meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/*第一步：创建ajax对象*/
var http = new XMLHttpRequest();
/*第二步：建立服务器连接
* open()
* args:
* 1.发送请求的参数 get post
* 2.api路径
* 3.async 返回true/false 同步或异步
* 同步：等待请求完成之后再执行后续代码
* 异步：请求和后续代码一起执行
* 4.连接接口的账号
* 5.连接接口的密码
* */
http.open("get","https//:www.maodou.com",true,"admin","pwd");
/*第三步：发送请求
* send();
* 如果是get请求 send（）不写参数 传递到后台的数据还在，在路径后面以 ？id&name=zzz格式放着
* 如果是post请求 添加参数 send(date);
* */
http.send();
/*第四步：监听服务器响应状态
* 如果服务器响应
http.status 200 服务器响应成功 500 服务器报错 404 页面丢失
http.readyState
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
响应完成之后数据在
http.response
http.responseText
http.responseXML xml数据
* */
http.onreadystatechange = function(){
}
/*第五步：渲染界面*/
</script>
</body>
</html>
2.原生ajax书写兼容
<!DOCTYPE html>
<html>
<head lang="en">
<Meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
</script>
</body>
</html>
3.原生ajax封装
<!DOCTYPE html>
<html>
<head lang="en">
<Meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function Ajax(method, url, data, callback) {
var http;
if (window.XMLHttpRequest) {
http = new XMLHttpRequest();
}
else {
http = new ActiveXObject("Microsoft.XMLHTTP");
}
if (methd = "get") {
if (data) {
url += "?";
url += data;
}
http.open(method, url);
http.send();
}
else {
http.open(method, url);
if (data) {
http.send(data);
}
http.send();
}
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
callback(http.response);
}
}
}
var res=null;
Ajax("get", "http://localhost:63342/lianxi.main", null, function (result) {
var data=eval(result);
res=data;
});
</script>
</body>
</html>
4.原生ajax跨域
用来测试的node服务器 cros,jsonp配置
let express=require("express");
let app=express();
//后台配置cros跨域
app.use((req,res,next)=>{
//这里是后端配置cros跨域
res.header("Access-Control-Allow-Origin","http://127.0.0.1:63342");
next();
});
app.get("/",(req,res)=>{
res.send("首页");
});
//get请求接口
app.get("/getStudentInfo",(req,res)=>{
res.send("学生数据");
});
//jsonp跨域接口
app.get("/userinfo",(req,res)=>{
//获取get 路径上的值
console.log(req.query);
let query=req.query;
let id=query.id;
let callback=query.callback;
let people={
10086:{
name:"张三",
age:20,
sex:'男'
}
}
res.send(callback+"("+JSON.stringify(people[id])+")");
});
app.listen(80,"127.0.0.1",()=>{
console.log("http://127.0.0.1:80");
});
<!DOCTYPE html>
<html>
<head lang="en">
<Meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function Ajax(method,url,data,callback){
var http;
if(window.XMLHttpRequest){
http = new XMLHttpRequest();
}
else{
http = new ActiveXObject("Microsoft.XMLHTTP");
}
if(method = "get"){
if(data){
url += "?";
url +=data;
}
http.open(method,url);
http.send();
}
else{
http.open(method,url);
if(data){
http.send(data);
}
http.send();
}
http.onreadystatechange = function(){
if(http.readyState == 4&& http.status == 200){
callback(http.response);
}
}
}
/*
* 在请求接口的时候 出现错误
* No 'Access-Control-Allow-Origin'
* 涉及到跨域资源共享的问题
* */
Ajax('get','http://127.0.0.1/getStudentInfo',null,function (ags){
console.log(ags);
});
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
