ajax 快速入门

Posted haibo-py

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax 快速入门相关的知识,希望对你有一定的参考价值。

ajax 快速入门

ajax作用:ajax 是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术.(实现浏览器与服务器之间的数据交互,实现页面的无刷新请求服务器,提高用户体验)

基本使用:

1.创建ajax对象:

new XMLHttpRequest() //普通浏览器使用,ie浏览器有特殊

2.创建事件函数(处理服务器返回的结果):

onreadystatechange

readyState  ajax对象状态:0:请求未初始化 1:服务器连接已建立 2:请求已接收 3:请求处理中 4请求已完成,且响应

status 响应码:200:‘ok‘    404:未找到页面   403:权限不足

responseText  接受服务器的返回的数据

3.初始化ajax请求

get --- xmlhttp.open(‘GET‘,1.php?a=1&b=2&c-3‘,true);

post --- xmlhttp.setRequestHeader(‘content-type‘,‘application/x-www-form-urlencoded"):

xmlhttp.open(‘POST‘,‘1.php‘,true);

4.发送ajax请求 --- send()

 

服务器返回

  1. echo 普通的字符串

  2. 普通html文件

  3. 返回xml字符串

  4. 索引数组

  5. 关联数组

 

注意事项

同源策略-当前页面要和服务器的协议地址和端口都要相同

post发送ajax请求 

--- setRequestHeader("content-type‘,‘application/x-www-from-urlencoded");

--- 发送参数 send("a=100&b=www")

firebug的使用

例子:
<script type="text/javascript">
//1.创建ajax对象
var x = new XMLHttpRequest;
//2.触发事件
x.onreadystatechange = function(){      // on  ready 准备 state状况 changge
    if(x.readyState == 4 && x.status == 200){
        console.log(x.responseText);   //返回的结果
        }
}
//3.初始化
x.open(‘GET‘,‘fuxi.php?id=100‘,true);   //true 异步 false是同步
//4 发送
x.send();  //发送ajax
如果是post 方式
3步和4步发生改变
x.open(‘POST‘,‘3.php‘,true);
x.setRequestHeader(‘content-type‘,‘application/x-www-form-urlencoded‘);重要
x.send(‘a=100&b=200‘);

配合php PDO预处理

<?php 

$id = $_GET[‘id‘];

$pdo = new PDO(‘mysql:host=localhost;dbname=pass;charset=utf8‘,‘root‘,‘123456‘);
//准备预处理
$stmt = $pdo->prepare(‘select * from phones where id = ?‘);
//赋值
$arr = [$id];
//执行
$stmt->execute($arr);
//获取结果
$res = $stmt->fetch(PDO::FETCH_ASSOC);

// var_dump($res);
$row = json_encode($res);

echo $row;

 

以上是关于ajax 快速入门的主要内容,如果未能解决你的问题,请参考以下文章

JQuery快速入门-Ajax

Ajax的快速入门

JQuery快速入门-Ajax

达达前端Ajax实战项目源码讲解(快速入门的实例)Github源码

html PHP代码片段: - AJAX基本示例:此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

Javascript快速入门(下篇)