day21ajax下

最新推荐文章于 2024-07-05 22:58:38 发布

qq_38068491

最新推荐文章于 2024-07-05 22:58:38 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/qq_38068491/article/details/83445465

版权

原理：浏览器会通过xhr发送请求，服务器处理请求，将结果返回给xhr，xhr通过DOM操作，将结果显示在页面上。（面试）

一、post和get一起封装

function ajax(obj){//caaa

var xhr = getXHR();

//处理ie缓存问题

obj.url += "?rand=" + new Date().getTime();

//如果请求方式为get，并且传递了数据，把数据放置在url后面

if(obj.method.toLowerCase() == "get"){

if(obj.data){

obj.url += "&" + parameter(obj.data);

}

xhr.open(obj.method,obj.url);

if(obj.method.toLowerCase() == "post"){

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

if(obj.data){

xhr.send(parameter(obj.data));

}else{

xhr.send();

}

}else{

xhr.send(null);

}

xhr.onreadystatechange = function(){

if(xhr.readyState == 4){

if(xhr.status == 200){

//alert(xhr.responseText);

obj.success(xhr.responseText);

//text.innerHTML = xhr.responseText;

}else{

if(obj.erro){

obj.erro("响应出错，状态为："+xhr.status+",出错原因"+xhr.statusText);

}

function getXHR(){

var xhr = null;

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

return xhr;

}

function parameter(obj){

//{uname: "刘德华", pwd: "234"}

//uname=刘德华&pwd=234;

//console.log(obj);

var arr = [];

for(var item in obj){

arr.push(item+"="+encodeURIComponent(obj[item]));

//console.log(arr);

}

console.log(arr.join("&"));

return arr.join("&");

}

二、处理ie编码问题

encodeURI()

encodeURIComponent();（上面）

三、ajax请求的优势（面试）

a.按需取数据，局部刷新，提高用户体验。

b.减轻服务器压力。

c.减少带宽，为企业节约成本。

d.提高程序性能。

四、实现学生管理系统

a.用户注册

用户名唯一检测（ajax验证）

b.登录

c.学生信息页（ajax获取所有信息。将信息渲染到页面）

d.学生信息页的增删改查；

修改页（用ajax将信息查找到，并将数据传到输入框中）

添加页

总结：1）只要有表单就用post请求，ajax就用get请求。

2）php中获取页面的值，写在调用getConnect（）函数前面。（这个可以随便位置，不用管）；

3）查询时，得到的是结果集，则需要将多条数据放在页面上，则要循环

<?php

include("../public.php");

$db=getConnect("studentssystem");

$sql="select * from students ";

$result=mysqli_query($db,$sql);

//有多条数据就要写在括号里，否则可以写在外面，括号里可写$row

{写在这作对比,好理解

//$sql="select * from user where uname='$uname'";

// $result=mysqli_query($db,$sql);

// $row=mysqli_fetch_array($result);

//if($row)}

//循环

while($row=mysqli_fetch_array($result)){//将结果集转成数组，但是每次只能是一条。print_r $row;//Array([0]=>4 [sid]=>4 [1]=>Tom [uname]=>tom);不仅通过数组下标输出，还通过字段输出。

则就可以用$row['sid']获取值。

$arr[]=$row;

}

$json=json_encode($arr);//转成json的对象形式

echo $json;// [{"0":"11","sid":"11","1":"\u5475\u5475","sname":"\u5475\u5475","2":"\u5973","ssex":"\u5973","3":"16","sage":"16","4":"\u4e0a\u6d77","sadress":"\u4e0a\u6d77","5":"189352","sphone":"189352"},{"0":"13","sid":"13","1":"\u9ad8\u91d1\u7ea2","sname":"\u9ad8\u91d1\u7ea2","2":"\u5973","ssex":"\u5973","3":"22","sage":"22","4":"\u6e56\u5357\u8861\u9633","sadress":"\u6e56\u5357\u8861\u9633","5":"15111","sphone":"15111"}]

html页面中

success:function(res){

var json = JSON.parse(res);//得到$json值，转成json形式的数组

// console.log(json);

//输出这种形式[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]；

//第一个对象：0: {0: "11", 1: "呵呵", 2: "女", 3: "16", 4: "上海", 5: "189352", sid: "11", sname: "呵呵", ssex: "女", sage: "16", sadress: "上海", …}

4.int型的值，不用引号。id也不用引号

$sql = "update students set sname = '$sname',ssex = '$ssex',sage = $sage,sadress = '$sadress',sphone = '$sphone' where sid = $sid";

五、同源策略：

http://127.0.0.1:8020/1809Demo/Day24/scor/index.html?__hbt=1540539082421

http://localhost:80/1809Demo/Day24/scor/php.php

http:协议相同

localhost：域名相同

80：端口号相同。

六、

如何解决跨域请求问题：

1）cors跨域：

header("Access-Control-Allow-Origin:*");允许所有域访问

header("Access-Control-Allow-Origin:http://127.0.0.1:8020");//指定允许访问的域：http://127.0.0.1:8020

index.html页面

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

</script>

document.onclick=function(){

ajax({

method:"get",

url:"http://localhost/1809data/Day24ajax/scor/php.php",

success:function(res){

console.log(res);

}

})

}

</script>

php.php页面

<?php

header("Access-Control-Allow-Origin:*");

echo 1234;

2）jsonp实现跨域：

实现原理：

1）动态创建一个scrpit标签，

var sc = document.createElement("script");

2）把sc添加到页面中

document.body.appendChild(sc);

3）给这个标签添加一个src,这个src赋值为要请求的域的地址。

sc.src = "http://localhost/1809Demo/Day24/scor/php.php";

4）给src添加一个查询串，这个查询串是一个回调函数

sc.src = "http://localhost/1809Demo/Day24/scor/php.php?calback=fn";

calback:键

fn ：值，这个是一个函数。

5）在php.php的接口中，通过get请求的方式获取这个值；

6）在接口中执行这个函数，并且把想要返回给别人使用的数据作为实参传递出来。

7）在请求的域中作为这个函数的形参就可以获取到跨域请求回来的数据。（拿回来的数据不需要用json解析，直接就可以使用，拿回来的数据的类型，要么是对象，要么是数组，可以直接使用）

index.html页面

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

document.onclick=function(){

1）var sc=document.createElement("script");

2）document.body.appendChild(sc);

3、4）sc.src="http://localhost/1809data/Day24ajax/jsonp/index.php?callback=fn";

}

7）function fn(res){

console.log(res);

}

</script>

index.php页面

<?php

//callback是一个函数

5）$callback=$_GET["callback"];

$str="{'name':'tom','age':18}";

// 在接口中执行这个函数，并且把想要返回给别人使用的数据作为实参传递出来。

6）echo $callback."(".$str.")";

案例：

天气预报：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

document.onclick=function(){

var sc=document.createElement("script");

document.body.appendChild(sc);

sc.src="http://api.k780.com/?app=weather.today&weaid=169&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&jsoncallback=box";

}

function box(res){

console.log(res);

}

</script>

百度搜索

<!DOCTYPE html>

<html>

<head>

padding: 0;

margin: 0;

}

#box{

width: 330px;

margin: auto;

margin-top: 200px;

}

#baidu{

height: 30px;

width: 250px;

}

#btn{

height: 30px;

width: 70px;

}

ul{

width: 230px;

border: 1px solid black;

border-top: none;

list-style: none;

padding: 10px;

padding-top: 0;

display: none;

}

ul li{

margin: 5px;

}

ul li:hover{

background: #ccc;

}

</style>

</head>

<body>

<!--<li><a href="#">1</a></li>

</ul>

</div>

</body>

</html>

var baidu = document.getElementById("baidu");

var oul = document.getElementById("oul");

baidu.onkeyup=function(){

oul.style.display = "block";

var sc=document.createElement("script");

document.body.appendChild(sc);

sc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+this.value+"&cb=box"

}

function box(res){

// {q: "g", p: false, s: Array(9)}p: falseq: "g"s: (9) ["谷歌翻译", "g2", "谷歌浏览器下载", "高德地图", "工商银行", "谷歌地图", "赶集网", "工商银行网上银行", "股市"]__proto__: Object

// console.log(res);//输出的是一个对象，里面有三个值。其中s是数组形式的

var arr=res.s;

var str="";

for(var i=0;i<arr.length;i++){

str+=`

<li><a href="https://www.baidu.com/s?wd=${arr[i]}">${arr[i]}</a></li>`;

}

oul.innerHTML=str;

}

</script>;

qq_38068491

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day21ajax下

原理：浏览器会通过xhr发送请求，服务器处理请求，将结果返回给xhr，xhr通过DOM操作，将结果显示在页面上。（面试）一、post和get一起封装 function ajax(obj){//caaa var xhr = getXHR(); //处理ie缓存问题 obj.url += "?rand=" + new Date()...
复制链接

扫一扫